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

Question

我有一些显示两个跨度的用户界面的问题，每个跨度都有一堆复选框。超文本标记语言看起来像：

<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; }

看起来是这样的：

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

小提琴样品

我做错了什么？




Answer 1

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

第二个问题是同样的问题——浏览器只将每个标签项视为一行文本，所以如果浏览器窗口不够大，它会绕到下一行，不管一个标签从哪里开始，另一个标签从哪里开始。

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

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

（当然，现在你的元素在每个