div и форму в той же строке

Question

он в той же строке, но форма имеет разную высоту ... любая идея?

Код:

<div id="link-social"> 
<form class="search" method="post" action=""> 
    <input id="search-box" type="text"> 
</form> 
<a href="http://instagram.com/" class="instagram"></a> 
<a href="http://facebook.com/" class="facebook"></a> 
</div> 

#link-social { 
    background:url(img/wbg.png) repeat; 
    width:388px; 
    height:56px; 
    float:left; 
    text-align:left; 
    display: inline-block; 
} 

.search { 
    display: inline; 
} 

.facebook { 
background-image: url('img/facebook.png'); 
width:29px; 
height:29px; 
display: inline-block; 
} 

.instagram { 
background-image: url('img/instagram.png'); 
width:29px; 
height:29px; 
display: inline-block; 
} 

Answer 1

Вы можете использовать #link-social *{display: inline-block;} или просто вы должны изменить инлайн с инлайн-блока в вашем .search.

Хорошо, что вы можете отобразить весь свой элемент как table-cell и выровнять его по центру.

Answer 2

Используйте класс сброса для CSS

В этом случае используйте

form { 
margin:0; 
padding:0; 
} 

Answer 3

Попробуйте поставить значки в различных тегов Div и использовать поплавок собственность на дивы или какой-либо структуры колонки, как Twitter Bootstrap или чистый (http://purecss.io/)!

Убедитесь, что скрипка: http://jsfiddle.net/z8ENB/

<div id="field"> 
<form class="search" method="post" action=""> 
    <input id="search-box" type="text"> 
</form> 
</div> 
<div id="link-social"> 
<a href="http://instagram.com/" class="instagram"></a> 
<a href="http://facebook.com/" class="facebook"></a> 
</div> 

div { 
    margin-right: 5px; 
    float:left; 
} 

Answer 4

MNAKE ЭТОЙ

DEMO

.search { 
    float:left; 
    line-height:29px; 

} 

Answer 5

сделать вашу форму display: block; потому display: inline; его высота и ширина в зависимости от его Содержание Вот решение Here is the solution

Answer 6

Попробуйте следующий CSS:

.search { 
    top: -10px; 
    position: relative; 
    display:inline; 
}