css 将 2 个元素调整为 100% 宽度

Question

我有这个 HTML:

<div>
    <label>field 1</label>
    <input type="text">
    <label>field 2</label>
    <input type="text">
    <label>field 3</label>
    <input type="text">
</div>

如何使用 CSS 使标签输入对使用 100% 的宽度？ (并且每一对都在自己的线上)

我曾经将标签输入对放在它们自己的子 div 中。但我想知道是否有一种方法可以只用 CSS 来做到这一点。 (我正在使用 compass 生成 CSS)。

为了加分..你能不能用相同的 CSS 使标签在移动(小屏幕)设备上位于上方一行。

非常感谢。

Answer 1

是这样的吗？ http://jsfiddle.net/m6pZH/13/

---

我建议您稍微修改您的 HTML，因为很难(即使可能)正确维护您当前的 HTML:

<ul>
    <li>
        <label>field 1</label>
        <input type="text" />
    </li>

    <li>
        <label>field 2</label>
        <input type="text" />
    </li>

    <li>
        <label>field 3</label>
        <input type="text" />
    </li>
</ul>

CSS:

li {
    display: block;
    overflow: auto;
}

li > label {
    float: left;
}

li > input {
    width: auto;
    float: right;
}