Cómo puedo alinear los input de tipo date para que estén a la par horizontalmente con los select? He intentado de varias maneras pero no he podido obtener lo que requiero.
Los input de tipo date los debería encerrar en otro div?
Soy novato en css y los artículos que he leído para poder alinear los input no me han solucionado el problema.
Adjunto el código html con sus respectivas clases
<div data-role="content">
<div class="menu">
<div class="menu-opcion">
<label for="cbosistema">Sistema *</label>
<select name="cbosistema" id="cbosistema" data-theme="e" class="form-select">
<option value="0" selected>SELECCIONE UNA OPCIÓN...</option>
<?php foreach($sistemas->result() AS $dato) { ?>
<option value="<?= $dato->id_sistemas?>"><?= $dato->nombre_sistema;?></option>
<?php } ?>
</select>
</div>
<div class="menu-opcion">
<label for="cbousuario">Quién modificó *</label>
<select name="cbousuario" id="cbousuario" data-theme="e" class="form-select">
<option value="0" selected>SELECCIONE UNA OPCIÓN...</option>
<?php foreach($usuarios->result() AS $fila) { ?>
<option value="<?= $fila->usuario;?>"><?= $fila->usuario; ?></option>
<?php } ?>
</select>
</div>
<div class="menu-opcion">
<label for="xdesde">Rango de Fechas *</label>
<input type="date" name="xdesde" id="xdesde" value="<?= date('Y-m')?>-01">
<input type="date" name="xhasta" id="xhasta" value="<?= date('Y-m-d');?>">
</div>
</div>
</div>
Adjunto mi código css
.menu {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.menu-opcion {
display: inline-block;
/* padding : 0 10px; */
}