html - div 和 form 在同一行

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

制作你的表单 display: block;因为 display: inline; 它的高度和宽度取决于它的内容这是解决方案 Here is the solution