Question

我在HTML中有几个元素，我想在它们换行时保持分组。我认为答案在于一些CSS（或者甚至是JavaScript），但我不确定。例如，我有几个元素如下：

<label A><input A><label B><input B><label C><input C>

用户有时会调整浏览器窗口的大小，我们最终会得到这样的结果：

<label A><input A><label B>
<input B><label C><input C>

在上面的示例中，输入B不在其输入元素旁边。有没有办法将标签和输入分组，以便它们包装在一起？我已经尝试了div并将元素放在一个带有“nowrap”的表中，结果好坏参半。我不介意换行，我只需要将标签和输入元素保持在一起。

Answer 1

尝试这样的事情：

<label>First Name:
    <input type="text">
</label>
<label>Last Name:
    <input type="text">
</label>

并设置

label {
    display: inline-block;
}

演示http://dabblet.com/gist/3145028

替代方案：将<label>和<input>包裹在<div> display: inline-block

中

Answer 2

将所有这些元素放在这样的div中：

<div style="white-space: nowrap">
  ...
</div>

Answer 3

在你希望保持在一起的每一对周围设置父div也可能是值得的 - 我知道你说你试过这个但是也给它们一个固定的宽度并显示：inline;它应该工作

ALSOO包括float：left / right;（只选择一个）这样，如果浏览器窗口太小而无法并排显示它们，那么它将取代结束对并将其放到下一行但是应该将所有元素保持在一起并排在一起。

Answer 4

简单的答案是将元素包装到另一个具有display：inline-block作为样式的元素中。所以......

<span class='wrapper'>
  <span class='left-side'></span>
  <span class='right-side'></span>
</span>

和

.wrapper {
  display: inline-block;
}

Answer 5

您可以将每个标签/输入组放在<span>中，然后将css设置为display:inline。我很确定这会使它保持分组。根据您的网站布局和以前的CSS，您可能需要调整span css。

Answer 6

既然你说这是在一张表中，这可能就是你要找的东西：http://jsfiddle.net/DX9G7/

HTML：

<table border="0" cellspacing="0" cellpadding="0">
    <colgroup>
        <col width="30%" />
        <col width="30%" />
        <col width="40%" />
    </colgroup>
    <tr>
        <td>
            <div class="form-row">
                <label>A</label>
                <input type="text" />
            </div>
            <div class="form-row">
                <label>B</label>
                <input type="text" />
            </div>
            <div class="form-row">
                <label>C</label>
                <input type="text" />
            </div>
        </td>
    </tr>
</table>

您现在可以按照自己的方式修改自己的CSS。

将包裹的元素保持在一起

6 个答案: