html - spans/div 内的奇数对齐

Question

我有一个包含文本和输入字段的跨度。我想知道是否可以让文本左对齐而输入字段右对齐。

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

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

首先是我的跨度示例，然后是它的当前 CSS 样式。

Answer 1

默认情况下，文本将左对齐，因此您可以将输入浮动到右侧：

.textBox input{
    float:right;
}

JSFiddle

或者，您是否更喜欢使用定位而不是浮动：

.textBox input{
    position:absolute;
    right:0;
    top:0;
}

请记住，父级将需要一个非默认位置：

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

JSFiddle

Answer 2

小提琴

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

.textBox input{
    float:right;
}

添加浮动向右推动向右和overflow:auto容器以清除浮动

Answer 3

这并不难。

考虑一下：

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你的输入文本。