将包裹的元素保持在一起

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

替代方法：使用display: inline-block将<label>和<input>包装在<div>

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。