带CSS的垂直形式

Question

如何将所有宽度相同的输入设为100％？

如果我将宽度设置为100％，则输入将在新行上中断：

div > input {
    width: 100%; 
}

HTML：

<div class="wrapper">
    <div>
        <label>Label</label>
        <input type="text" />
    </div>
    <div>
        <label>Label</label>
        <input type="text" />
    </div>
    <div>
        <label>Label</label>
        <input type="text" />
    </div>  
</div>

CSS：

.wrapper label {
    float: left;
    margin-right: 10px;
}
.wrapper div {
    margin-bottom: 15px;
}

期望的结果（JSFiddle）：

Answer 1

.wrapper input {
    width: 90%;
}

如果没有换行，你无法100％完成，因为Label会占用一些屏幕空间。您可以为文本字段分配剩余部分。

Answer 2

您可以执行以下操作： DEMO

只需删除float语句，同时制作label和input display: inline-block。

.wrapper div {
    margin-bottom: 15px;
}
div > input, div > label {
    display: inline-block;
}
div > input {
    width: 77%;
}

div > label {
    width: 20%;
}

您可以更改input字段和/或labels的宽度，但我认为width: 77%是输入字段可能的最高值（带有标签的宽度）设置为20％）仍然显示内联。

修改

请注意，使用基于HTML标记名的CSS选择器并不是理想的方法。更好的方法是给所有labels和inputs一个类（分别为f {。class="lbl"和class="inp"），并选择它们，如下面所示：

...
.lbl, .inp {
    display: inline-block;
}
...

Answer 3

<pre>
.wrapper{width:100%; display:block}
.wrapper lable{width:30%; display:inline-block; position:relative}
.wrapper input{width:70%; display:inline-block; position:relative}
</pre>