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

Question

我遇到了一些显示两个跨度的用户界面的问题，每个跨度都有一堆复选框。 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; }

看起来是这样的:

这有两个问题。首先，右侧的复选框溢出到左侧的框中，还有边框。 Select All 文本应该在其自己的范围内，元素列表将全部在右侧框中。第二个问题是元素 4 复选框被分成两行。我想治疗 <label>标记为一个单元，永远不要跨越多行。

Fiddle Sample

我做错了什么？

Answer 1

据我所知，您的两个问题都源于将您的内容放入内联元素中。当浏览器太小而无法同时容纳 <span> 的内容时在整个宽度上，第二个跨度中的内容简单地环绕到下一行，就像那些 <span> 中的所有元素一样。就在一条直线上。您可以通过 span 元素周围的边框来想象这种效果。

第二个问题是相同的——浏览器将每个标签项视为一行文本，因此如果浏览器窗口不够大，无论标签在哪里，它都会换行到下一行开始，另一个开始。

只需将它们都更改为内联 block 就可以了:

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

(当然，现在每个 <span> 中的元素都换成了两行，因为现在内联 block 元素实际上服从了您给它们的宽度设置，所以您必须稍微调整一下。