0

mi pregunta es la siguiente, cuento con 2 select en html y un boton conjunto, les he estado dando forma con css y quedan bien pero al momento de cambiar el tamaño del navegador los titulos de los select y el boton no quedan alienados, solo he podido centrarlos con text-aling:center pero al cambiar la resolucion se mueven, estoy buscando algo asi:

---------------------------------------
Select: "CAJA"    Select: "CAJA"  Boton
---------------------------------------

#busqueda {
    text-align:center;
    margin-top:15px;
    width:100%;
    height:auto;
    display:inline-block;
}

select {
    background: #E8EBF7;
    border: none;
    font-size: 15px;
    height:30px;
    padding:5px;

}

#select1 {
    margin-left:5px;
}

#select2 {
    margin-left:5px;
}

#boton1 {
    border: none;
    background: #BF68F5;
    color: #f2f2f2;
    padding: 10px;
    margin-left:5px;
    font-size: 15px;
    border-radius: 10px;
    position: relative;
    box-sizing: border-box;
    transition: all 500ms ease;
}
<div id="busqueda">
            Estado:
            <select name="estados" id="select1">
                <option value="0">Todo México</option>
                <option value="1">Aguascalientes</option>
                </select>
            Categoria:
             <select name="categorias" id="select2">
                <option value="0">Todas las Categorias</option>
                <option value="1">Vestidos</option>
             </select>
             <input type="submit" value="Buscar" name="buscar" id="boton1">
</div>

0

1 respuesta 1

0

Si entiendo correctamente tu problema,

Primero, deberías considerar el contenedor '#busqueda' como un bloque ('display: block;')... esto te permitirá dimensionarlo a tu gusto. Además, supongo que tu intención era mostrar cada uno de los elementos contenidos en la misma línea, pero el valor de esta propiedad no es heredado por los elementos contenidos (por lo tanto, no corresponde 'inline-block').

Segundo, tratar a cada elemento también como un bloque con la propiedad 'float', ya que así podrás ponerlos todos uno a continuación de otro.

Quedaría algo así:

#busqueda {
    text-align:center;
    margin-top:15px;
    width:100%;
    height:auto;
    display:block;
}

#busqueda p {
    display:block;
    float:left;
    margin-left:5px;
}

#busqueda select {
    display:block;
    float:left;
    margin-left:5px;
    background:#E8EBF7;
    border:none;
    font-size: 15px;
    height:30px;
    padding:5px;
}

#boton1 {
    display:block;
    float:left;
    border:none;
    background:#BF68F5;
    color:#f2f2f2;
    padding:10px;
    margin-left:5px;
    font-size:15px;
    border-radius:10px;
    box-sizing: border-box;
    transition: all 500ms ease;
}

También encontrarás que saqué del '#boton1' la propiedad 'position:relative;' ya que el 'float' lo posicionará correctamente.

Respecto al código html, solo agrega la etiqueta 'p' a 'Estado' y 'Categoría'.

Respecto a los posicionamientos te recomiendo: Aprende Posicionamiento con CSS en 10 Pasos

4
  • 1
    Como puntualización, un div ya tiene por defecto display: block por lo que ponerle esta propiedad al div es redundante. Commented el 29 nov. 2016 a las 6:51
  • Gracias, la verdad apenas estoy aprendiendo desarrollo, he estado jugando con los elementos, le dare una leida al link que proporsionaste, ya probe el codigo pero aun al cambiar de tamaño la pagina se desacomodan los elementos.
    – user5019
    Commented el 29 nov. 2016 a las 16:59
  • Se me ocurre que puedes probar definiendo el contenedor #búsqueda como una tabla y cada elemento contenido como una celda... siempre con 'd
    – marcarand
    Commented el 1 dic. 2016 a las 19:29
  • ... siempre con la propiedad 'display'.
    – marcarand
    Commented el 1 dic. 2016 a las 19:31