html - スパン/div 内の奇数アライメント

Question

テキストと入力フィールドを含むスパンがあります。テキストを左に揃え、入力フィールドを右に揃えることが可能かどうか疑問に思っていました。

<span class="textBox">NAME: <input type="text" id="NAME"/></span>

.textBox{
    display:inline-block;
    width:450px
}

最初にスパンの例を示し、次に現在の CSS スタイルを示します。

Answer 1

フィドル

.textBox{
    display:inline-block;
    width:450px;
    padding:5px;
    background-color:#eee;
    overflow:auto;
}

.textBox input{
    float:right;
}

フロートを右に追加して右にプッシュしoverflow:auto、コンテナにフロートをクリアします

Answer 2

それほど難しいことではありません。

このことを考慮 ：

HTML:

<span class="textBox">NAME: 
    <input type="text"class='text1' id="NAME"/>
</span>

CSS:

.textBox{
    display:inline-block;
    width:450px;

}

.text1{
    display:inline-block;
    float:left;
}

ここでフィドルを見つけてください：http://jsfiddle.net/TbB3S/

float:left入力テキストに与える必要がありました。