1

introducir la descripción de la imagen aquí

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; */
    }

1 respuesta 1

2

Sólo alineado horizontalmente como preguntas:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .flex {
            display: flex;
        }

        .menu-opcion {
            margin-right: 5%
        }
        .menu-opcion label,
        .menu-opcion select,
        .menu-opcion div {
            display: block;
        }
    </style>
</head>

<body>
    <div data-role="content">
        <div class="menu flex flex-around">
            <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>
                    <option value="">Baz</option>
                </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>
                    <option value="">Foo</option>
                </select>
            </div>

            <div class="menu-opcion">
                <label for="xdesde">Rango de Fechas *</label>

                <div class="flex">
                    <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>
    </div>
</body>

</html>

Este código tiene varios problemas, por lo pronto no es HTML válido, debes incluir un label por cada elemento de formulario, input, select, etc. También es complicado de ajustar horizontalmente, una mejora sería:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            font-size   : 14px;
            font-weight : normal;
            margin      : 0;
            padding     : 0;
        }
        .flex {
            display: flex;
        }
        .flex-both {
            justify-content: space-between;
        }
        .menu-opcion label,
        .menu-opcion select {
            display: block;
        }
        .w-1-3 {
            width: calc(100%/3);
        }
    </style>
</head>

<body>
    <div data-role="content">
        <div class="menu flex flex-around">
            <div class="menu-opcion w-1-3">
                <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>
                    <option value="">Baz</option>
                </select>
            </div>

            <div class="menu-opcion w-1-3">
                <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>
                    <option value="">Foo</option>
                </select>
            </div>

            <div class="menu-opcion w-1-3">
                <h3 class="label">Rango de Fechas *</h3>

                <div class="flex flex-both">
                    <div class="flex">
                        <label for="xdesde">Desde</label>
                        <input type="date" name="xdesde" id="xdesde" value="">
                    </div>

                    <div class="flex">
                        <label for="xhasta">Hasta</label>
                        <input type="date" name="xhasta" id="xhasta" value="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

1
  • Muchas gracias @Orici :D
    – Victor
    Commented el 20 ene. 2023 a las 19:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.