input and button side by side

StackOverflow https://stackoverflow.com/questions/23583298

Pregunta

Im working on a header for a website and i have a problem with search option.
I have include an input and a button tag.
Thoose have to have a vertical-align: middle; and should be side by side.

I've try something but it doesn't work. Can somebody explain why and how i fix that?

HTML: 

    <div id="main_search">
        <input id="main_search_input" type="text" placeholder="Suchen" />
        <button id="search_button"><img src="search.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" alt="" title="" /></button>
    </div>

CSS:

#main_search {
    float: right;
    line-height: 60px;
    margin: 0 50px 0 0;
}
#main_search_input {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    height: 20px;
    line-height: 20px;
    width: 200px;
    vertical-align: middle;
    padding: 5px 10px 5px 10px !important;
}
#search_button {
    background-color: #FFF;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 30px;
    padding: 5px;
    vertical-align: middle;
}

FIDDLE

¿Fue útil?

Solución

input and button elements are inline elements, as such by separating them by a newline in your code, this is effectively interpreted and rendered as a whitespace character, leading to a gap appearing between them.

To solve this, add:

input, button{
    margin:0;
}

Then remove the new line from between the elements in your HTML:

Demo Fiddle

<body>
    <div id="main_search">
        <input id="main_search_input" type="text" placeholder="Suchen" /><button id="search_button">
            <img src="https://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/magnifier.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" />
        </button>
    </div>
</body>

Alternatives

(also requiring setting no margins, per above)

Float the two elements so they push up against one another

Apply a font-size:0 to #main_search so the space has a width of zero

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top