0

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

它看起来像这样：

在此处输入图像描述

这有两个问题。首先，右侧的复选框与边框一起渗入左侧框。Select All文本应在其自己的范围内，并且项目列表将全部位于右侧框中。第二个问题是第 4 项复选框被分成两行。我想将<label>标签视为一个单元，永远不要跨越多行。

小提琴样本

我究竟做错了什么？

4

1 回答 1

2

据我所知，您的两个问题都源于将您的内容放入内联元素中。当浏览器变得太小而无法<span>在宽度上容纳两者的内容时，第二个跨度中的内容会简单地环绕到下一行，就像其中的所有元素<span>都在一条直线上时一样。您可以使用 span 元素周围的边框来可视化此效果。

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

只需将这两个都更改为 inline-blocks 就可以了：

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

（当然，现在每个内部的元素<span>都换成了两行，因为现在 inline-block 元素实际上遵循了你给它们的宽度设置，所以你必须稍微摆弄一下。

于 2013-01-25T00:04:45.737 回答