css - 将元素从其正常的左侧定位到最右侧的位置

Question

我有这个http://jsfiddle.net/Gqufq/并且我想将第二个输入放在第一个输入之后（在同一行中）并将其结束到 div 的右侧。

如何使用 CSS 做到这一点，而不在第一个输入上放置明确的尺寸？（此外，div 可能具有可变宽度）

div { width: 200px; background-color: gray; }

<div>
    <input size="5" />
    <input />
</div>

Answer 1

尝试这个

http://jsfiddle.net/Gqufq/1/

  div { width: 200px; 
background-color: gray; 
display:inline;
padding:5px; }

Answer 2

也将size属性添加到第二个输入框。

Answer 3

更改position: absolute第二个输入。 JSFiddle

但它不会看起来很好。所以改变divas的宽度width: 100%

Answer 4

使用浮动技术和标签就可以了：http: //jsfiddle.net/H3YQ3/1/，http : //jsfiddle.net/H3YQ3/2/

div {
    width: 200px;
    background-color: gray;
    margin:1em;
}
label {
    display:block;
    overflow:hidden;
}
label:first-child {
    float:left;
    width:50px;
}
input {
    display:block;
    width:100%;
    box-sizing:border-box;
}
.big {
    width:400px;
}