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>

如何使用标签输入对使用100％的宽度？（并且每一对都在他们自己的行上）

我曾经将标签输入对放在他们自己的子div中。但我想知道是否有办法只使用CSS。（我正在使用罗盘来生成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;
}

Answer 2

试试这个：

div label, div input {
    display: block;
}

在block上显示元素会将它们放在自己的行上，并使它们成为块元素。

编辑内容：

div { width: 600px }
div label { float: left; width: 200px; }
div input { float: right: width: 390px; }

试试这个。

css适合2个元素到100％宽度

2 个答案: