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;

Answer 2

次の css を試してください。

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

Answer 3

MNAKE THIS

デモ

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

}