1

送信ボタンをフォームの1つのエントリに揃えようとしても無駄です。送信ボタンをフォームボックスの右中央に少し配置したいだけです。現在、それは右側にありますが、ボックスの少し下にあります。

送信ボタンの配置（フロート、マージンなど）に関する同様の質問に答えて、さまざまな応答をすべて試しましたが、私の人生では正しいオプションを見つけることができません！

私のHTMLは次のようになります。

<input name="query" id="querybox" style="width:400px;height:40px;font-size:26px;border-radius:15px;border=0;">
        </input>

    <input type="button" value="Search" id="search" style="width:100px;height=40px;font-size=20px;"/>

ボタンのスタイルを設定するCSSは次のようになります。

    #search {
cursor:pointer; 
    width:70px; 
    height: 31px; 
    line-height:0; 
    font-size:0; 
    text-indent:-999px;
    color: transparent;  
    background: url(ico-search.png) no-repeat #151B54 center; 
    border: 1px solid #FFFFFF; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
}

#submit:hover {
    background: url(ico-search.png) no-repeat center #151B54; 
    border: 1px solid #FFFFFF;

    }

どんな助けでも大歓迎です!! ありがとう。

4

3 に答える 3

1

入力をそれぞれdivにラップします。

<div class="vertAlign">
    <input name="query" id="querybox" style="width:400px;height:40px;font-size:26px;border-radius:15px;border=0;"></input>
</div>

<div class="vertAlign"> 
    <input type="button" value="Search" id="search" style="width:100px;height=40px;font-size=20px;"/>
</div>​

次に、このcssを適用します

.vertAlign{
    display: inline-block;
    vertical-align:middle;
}​

これが結果のフィドルです

注：すべてのCSSはそのままで問題ありません。ソリューションが読みやすくなるように、フィドルでは省略しました。

于 2012-09-10T20:44:47.177 に答える
0

このjsfiddleを試してみてください：

http://jsfiddle.net/UXRjN/1/

検索ボタンをDIVにラップし、いくつかのマイナーな属性を追加しました

于 2012-09-10T20:45:21.487 に答える
0

CSSプロパティを使用vertical-alignして、行内のインライン要素を垂直方向に配置します。

于 2012-09-10T21:29:06.543 に答える