2 select and 1 button on a div make them responsive [duplicate]

Question

2 select and 1 button on a div make them responsive [duplicate]

Navigation

#1 by (0 votes)

0

my question is the following, I have 2 select in html and a joint button, I have been shaping them with css and they look good but when changing the size of the browser the titles of the select and the button are not alienated , I've only been able to center them with text-aling: center but when changing the resolution they move, I'm looking for something like this:

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

html css

asked by EduardoVelazquez 29.11.2016 в 00:24

source

1 answer

httpClient: if my request fails, how should I restart it? Show toast input ionic ion 2

score 0 · Accepted Answer

If I understand your problem correctly,

First, you should consider the container '#search' as a block ('display: block;') ... this will allow you to size it to your liking. Also, I suppose that your intention was to show each of the elements contained in the same line, but the value of this property is not inherited by the contained elements (therefore, it does not correspond to 'inline-block').

Second, treat each element also as a block with the property 'float', since that way you can put them all one after another.

It would be something like this:

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

You'll also find that I pulled the 'position: relative;' property from '# button1' since the 'float' will position it correctly.

Regarding the html code, just add the label 'p' to 'Status' and 'Category'.

Regarding the positioning, I recommend you: Learn Positioning with CSS in 10 Steps