検索フィールド付きのCSSメニュー - Chrome、FF、IE

Question

CSSで本質的にシンプルなメニューを作成したかったのですが、 クロムではうまく見えますが、それはひどく見えます。

のは、私はNAV層を持っているとしましょう（40ピクセルの高さ、幅100％）：

<nav id="navbar"> 
<div class="main-navigation"> 
    <ul> (list-style:none;) 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Page1</a></li> 
     <li><a href="#">Page2</a></li> 
     <li><a href="#">Page3</a></li> 
     <li><a href="#">Page4</a></li> 
    </ul> 
    <div class="search"> 
     <form method="get" action=""> 
      <input type="text" name="q" class="search-input" placeholder="Type here" /> 
      <input type="submit" class="search-btn" value="Search" /> 
     </form> 
    </div> 
</div> 
</nav> 

私は、高さ30px、フォントサイズを持つすべてのボタンがしたい

：14pxの;ボーダー半径：5ピクセル。 と検索入力と送信ボタン（入力 - 高さ30px;国境 - 半径：5px 0 0 5px;提出 - 高さ30px;国境 - 半径：0 5px 5px 0;）

1つの等号で表示されますか？

多くのおかげ

Answer 1

インラインブロックは、あなたの最善の選択肢です。それは思考の小さな調整ですが、十分な価値があります。 Re-fiddled