Question

我有这个http://jsfiddle.net/Gqufq/，我想把第二个输入放在第一个输入之后（在同一行），然后将它放在div的右边。

如何使用CSS执行此操作，而不在第一个输入上放置明确的维度？（另外，div可以有一个可变的宽度）

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

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

Answer 1

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

Answer 2

试试这个

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

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

Answer 3

更改第二次输入的position: absolute。 JSFiddle

但它看起来不会很好。所以将div的宽度更改为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;
}

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

4 个答案: