我有许多人使用的标准下拉布局,嵌套 <ul>
<li>
中的元素元素。事情是这样的:我想要那些 child <li>
要在列中显示的元素。假设我有 20 个元素,我想要四行,每行五个元素。我一直在通过输出 <span>
来做到这一点标记每组 5 个列表项,只是愚蠢地忘记了 span 不允许作为无序列表的直接子项。 E.G
<span class="col">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</span>
这在视觉上工作正常,但显然无法验证。我已经搜索了很多解决方案,但我被严重困住了。有谁知道如何在列中显示这些列表项?我也读过(不知道)<li>
元素可能只有 <ul>
, <ol>
和 <menu>
作为父元素,目前用处不大。我能想到的最好的是;
<ul>
<li></li>
<li></li>
<li>
<ul><!--drop down with columns-->
<li><!--column-->
<ul>
<li></li>
<li></li>
</ul>
</li>
<li><!--column-->
<ul>
<li></li>
<li></li>
</ul>
</li>
<li><!--column-->
<ul>
<li></li>
<li></li>
</ul>
</li>
<li><!--column-->
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
...这看起来非常浪费 HTML。有任何想法吗..?
谢谢,丹。
最佳答案
如果 IE 9 及更早版本不是优先事项,您可以使用 CSS 列来实现您想要的:
不支持它的浏览器 (IE 6、7、8、9) 仍然可以很好地显示您的菜单,除了在垂直列中(这是显示菜单的通常方式,所以应该没问题)。或者,您可以为不支持的浏览器使用 polyfill。
示例代码:
<ul class="parent-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Daddy 1
<ul class="child-list">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
<li>Child 5</li>
<li>Child 6</li>
<li>Child 7</li>
<li>Child 8</li>
<li>Child 9</li>
<li>Child 10</li>
<li>Child 11</li>
<li>Child 12</li>
<li>Child 13</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
.parent-list > li {
float: left;
}
.child-list {
position: absolute;
width: 400px;
-webkit-column-width: 100px;
-moz-column-width: 100px;
}
.child-list > li {
width: 100px;
}
填充物:
CSS3MultiColumn
Columnizer
引用文献:
http://caniuse.com/multicolumn
http://www.w3.org/TR/css3-multicol/
关于html - 下拉布局-如何制作 "columns",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19927345/