19

我在 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”的表中，结果好坏参半。我不介意换行，我只需要将标签和输入元素放在一起。

4

6 回答 6

17

尝试这样的事情：

<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

于 2012-07-19T16:17:10.343 回答
8

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

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

和

.wrapper {
  display: inline-block;
}
于 2015-04-25T15:39:46.070 回答
6

将所有这些元素放在一个 div 中，如下所示：

<div style="white-space: nowrap">
  ...
</div>
于 2012-07-19T16:17:25.087 回答
6

可能还值得考虑在您希望保持在一起的每一对周围设置父 div - 我知道您说过您尝试过这个，但也给它们一个固定的宽度和 display:inline; 它应该可以工作

还包括浮动：左/右；（仅选择一个）这样，如果浏览器窗口太小而无法并排显示它们，它将取而代之的是末端对并将其放到下一行，但应保留所有元素并排在一起。

于 2012-07-19T16:17:57.073 回答
0

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

于 2012-07-19T16:15:25.363 回答
0

既然你说这是在一张桌子上，这可能就是你要找的东西：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。

于 2012-07-19T16:17:49.767 回答