html入力と提出の調整

Question

私の入力テキストフィールドと送信ボタンが並んでいないばかげた問題を抱えています。あなたは下の画像で見ることができるように、（右上の「キーワードを入力し、」ラベル」）のテキスト入力フィールドには、 『検索ボタンを提出するよりも2ピクセル高い』：

ここではHTMLであります：ここで

<div id="search"> 
    <form action="#" method="POST" id="search_form"> 
     <div id="search_inputs"> 
      <input type="text" placeholder="Enter Keywords" name="keywords" /> 
      <input class="button" type="submit" name="search" value="SEARCH" /> 
     </div> 
    </form> 
</div> 

CSSコードです：

#search_form .button { 
    background: black; 
    color: white; 
    padding: 3px 15px; 
    border: none; 
    font-size: 7pt; 
    height: 18px; 
} 

#search_form input[name="keywords"] { 
    width: 175px; 
} 

#search { 
    margin-top: 7px; 
    float: right; 
} 

私は7PTにフォントサイズがそれをめちゃくちゃにされた設定をかなり確信しているが、私はなぜわからないんだけど、私は知りませんの仕方これは、その領域の他のボタンのフォントサイズだからです。

ありがとうございました！

Answer 1

を#search_form input[name="keywords"]に追加してください。スタイルアラインメントの上部が正しく表示されている場合は、margin-rightを追加してください。

Fiddle

問題は、検索ボタンをfloat: rightに由来します。入力ボックスには天然のdisplay: inline-blockが含まれているため、わずかな低下が発生します。通常、この問題を解決するには、その要素をDOM内で上に移動します。この場合、これは機能しません。浮動要素への入力を変更すると、強制的にdisplay: inlineになります。

なぜ私は要素にdisplay: inlineを追加できないのか分かりませんが、