html - ページの右側にある検索バーを揃えることができません

Question

search barをページの右端に揃えたい。これを行うために、次のように書きました。

<form method="get" action="#">
    <input type="search" name="q" style="text-align:right" />
</form>

ただし、検索バーが右側に配置されません。何故ですか ？

Answer 1

<form method="get" action="#" style="float:right">

ただし、インライン スタイルは使用しないでください。可能な限り外部スタイルを使用するようにしてください。

影響をfloat受ける要素を画面の片側に移動します。次のすべての要素は、フローティング要素と水平方向に整列します。

このような 2 つの要素があるとします。

|| Element1 ||
|| Element2 ||

に適用するfloat:leftとElement1、出力は次のようになります。

|| Element1 | Element2 ||

代わりに適用float:rightすると、出力が逆になります。

|| Element2 | Element1 ||

一言で言えば、floatそれが言うことを正確に行います。要素を画面の端に浮かせ、次の要素の端にします。

PS : 簡単にするために、画面の端を書きました。float階層的な方法で申請することもできます。その場合、親要素の端が整列する端になります。

Answer 2

text-alignまさにそれを行い、要素内のテキストを右に揃えます。入力ボックスの場合、入力フィールドの右側にカーソルが置かれます。入力ボックスを右側に配置しますfloat。これにより、入力ボックスがその親要素（この場合はフォーム）の右端に配置されます。

HTML

<form method="get" action="#">
    <input placeholder="Search" type="search" name="q" id="search-box" />
</form>

CSS

form{
    background-color: #000;
    overflow: auto;
    height: 50px;
    padding:5px 5px 0;
}
#search-box{
    float:right;
}

これがjsFiddleです