显示两个内联跨度，每个内联带有一堆复选框

Question

我遇到了一些显示两个跨度的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>

我有以下CSS：

div.arealist { display: block; clear: both; margin-top: 40px; }
div.arealist>span { display: inline; padding: 25px; }
div.arealist>span label { display: inline; }
div.arealist>span.group { width: 75px; border: 1px solid #d0d0d0; }
div.arealist>span.areas { width: 300px; border: 1px solid #d0d0d0; }

看起来像这样：

这有两个问题。首先，右侧的复选框将渗透到左侧框中，同时也显示边框。 全选文本应位于其自己的范围内，并且项目列表将全部位于右侧框中。第二个问题是 Item 4 复选框分为两行。我想将<label>标记视为一个单元，永远不要跨越多行。

Fiddle Sample

我做错了什么？

Answer 1

据我所知，您的两个问题都来自将内容放入内联元素。当浏览器太小而无法在宽度上保持<span>的内容时，第二个跨度中的内容只会绕到下一行，就像那些{{1}中的所有元素一样。只是在一条直线上。您可以使用span元素周围的边框来显示此效果。

第二个问题是同样的交易 - 浏览器将每个标签项目视为一行文本，因此如果浏览器窗口不够大，它将环绕到下一行，无论一个标签在哪里开始，另一个开始。

只需将这两个更改为内联块，就可以了：

<span>

（当然，现在你的每个div.arealist>span { display: inline-block; padding: 25px; } div.arealist>span label { display: inline-block; } 里面的元素都包裹成两行，因为现在内联块元素实际上是服从你给它们的宽度设置，所以你不得不摆弄它。