我在一些显示两个跨度的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; }
看起来像这样:
这有两个问题。首先,右侧的复选框以及边框也会渗入左侧的框。 “全选”文本应在其自己的范围内,项目列表都将在右侧框中。第二个问题是项目4复选框分为两行。我想将
<label>
标记视为一个单元,永远不要跨越多行。Fiddle Sample
我究竟做错了什么?
最佳答案
据我所知,这两个问题都是由于将内容放入内联元素而引起的。当浏览器变得太小而无法容纳整个宽度上的两个<span>
内容时,第二个跨度中的内容将自动换行到下一行,就像那些<span>
中的所有元素都位于一条直线。您可以使用span元素周围的边框来可视化此效果。
第二个问题是相同的处理-浏览器将每个标签项都视为一行文本,因此,如果浏览器窗口不够大,则不管一个标签从何处开始,另一个标签都将绕到下一行开始。
只需将它们都更改为内联块,就可以了:
div.arealist>span { display: inline-block; padding: 25px; }
div.arealist>span label { display: inline-block; }
(当然,现在每个
<span>
中的元素都包装成两行,因为现在inline-block元素实际上正在服从您为它们设置的宽度设置,因此您必须对此进行一些调整。关于html - 显示两个内联跨度,每个跨度都有一堆复选框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14512696/