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

Fiddle

.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提供给输入文字。