Skip to main content
Publicación cerrada como "Duplicada" por Francisco Romero, Shaz, fredyfx, toledano, Mariano
se añadieron 213 caracteres en el cuerpo
Origen Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64
---------------------------------------
Select: "CAJA"    Select: "CAJA"  Boton
---------------------------------------
 
<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>

CSS;

#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;
}

#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>

---------------------------------------
Select: "CAJA"    Select: "CAJA"  Boton
---------------------------------------
 
<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>

CSS;

#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;
}
---------------------------------------
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>

Editar código.
Origen Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64

Select: "CAJA" Select: "CAJA" Boton

Estado:Todo MéxicoAguascalientesCategoria:Todas las CategoriasVestidos

CSS;

#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; }

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

<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>

CSS;

#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;
}

Select: "CAJA" Select: "CAJA" Boton

Estado:Todo MéxicoAguascalientesCategoria:Todas las CategoriasVestidos

CSS;

#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; }

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

<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>

CSS;

#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;
}
Origen Enlace
user5019
user5019

2 select y 1 boton en un div hacerlos responsivos

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

Estado: Todo México Aguascalientes Categoria: Todas las Categorias Vestidos

CSS;

#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; }