2

入力テキストフィールドと送信ボタンが並んでいないというばかげた問題があり、それを修正するエレガントな解決策が本当にわかりません。下の画像でわかるように、入力テキスト フィールド (右上に「キーワードを入力」というラベルが付いています) は、「検索」送信ボタンより 2px 高くなっています。

入力フィールドは送信ボタンの上 2px です

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;
}

font-size を 7pt に設定するとめちゃくちゃになると確信していますが、その理由はわかりませんし、その領域の他のボタンのフォントサイズであるため、これに対処する方法もわかりません。

助けてくれてありがとう！

4

1 に答える 1

3

float: left;スタイルに aを追加すると、#search_form input[name="keywords"]トップが正しく整列されます。次に、いくつかを追加すると、準備が整いmargin-rightます。

フィドル

この問題はfloat: right、検索ボタンから発生します。入力ボックスには自然display: inline-blockな歪みがあり、わずかなドロップが発生します。通常、右にフロートする場合、これを修正するには、DOM でその要素を上に移動します。この場合、これは機能しません。入力を浮動要素に変更することで、強制的にdisplay: inline.

display: inline要素に a を追加できない理由はわかりませんが。

于 2012-04-30T02:26:14.057 に答える