Html 显示两个内联跨距，每个跨距中有一组复选框

我遇到了一些显示两个跨度的UI问题，每个跨度都有一组复选框。HTML看起来像：

<strong>Areas Impacted</strong>
<div class="arealist">
  <span class="group"><label><input type="checkbox" />Select All</label></span>
  <span class="areas">
    <label><input type="checkbox" />Item 1</label>
    <label><input type="checkbox" />Item 2</label>
    <label><input type="checkbox" />Item 3</label>
    <label><input type="checkbox" />Item 4</label>
    <label><input type="checkbox" />Item 5</label>
    <label><input type="checkbox" />Item 6</label>
    <label><input type="checkbox" />Item 7</label>
  </span>
</div>

看起来是这样的：

这有两个问题。首先，右侧的复选框与边框一起流入左侧的复选框。“全选”文本应在其自己的范围内，项目列表应全部位于右侧框中。第二个问题是项目4复选框被分成两行。我希望将

标记视为一个单独的单元，永远不要跨越多行

---

我做错了什么？

据我所知，您的两个问题都是由于将内容放入内联元素而引起的。当浏览器太小而无法容纳两个

的内容时，第二个跨距中的内容会简单地绕到下一行，就像那些

中的所有元素都在一条直线上一样。您可以在跨度图元周围设置边框，以可视化此效果

第二个问题是相同的——浏览器将每个标签项视为一行文本，因此，如果浏览器窗口不够大，它将环绕到下一行，而不管一个标签从何处开始，另一个标签从何处开始

只需将这两个块都更改为内联块即可：

div.arealist>span { display: inline-block; padding: 25px; }
div.arealist>span label { display: inline-block; }

---

（当然，现在每个

中的元素都被包装成两行，因为现在内联块元素实际上遵守了您给它们的宽度设置，所以您必须稍微调整一下。

在JSFIDLE中对我来说很好，哪个浏览器你明白了吗？试着做你在小提琴上做的事情，因为它看起来很好。你可能在IE8和Firefox中尝试了一些冲突的cssI。在Chrome/Mac上也有同样的问题。哦，你可能必须缩小浏览器窗口一点，标签才能开始包装。

div.arealist>span { display: inline-block; padding: 25px; }
div.arealist>span label { display: inline-block; }