Question

我有许多人使用的标准下拉布局，<ul>元素中的嵌套<li>元素。事情就是这样：我希望将这些子<li>元素显示在列中。假设我有20个项目，我想要四行五个元素。我一直在这样做，通过在每组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。有任何想法吗..？

谢谢，Dan。

Answer 1

如果IE 9及更早版本不是优先级，您可以使用CSS列来实现您的目标：

http://jsfiddle.net/kXDDL/1/

不支持它的浏览器（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;
}

POLYFILLS：
CSS3MultiColumn
Columnizer

参考文献：
http://caniuse.com/multicolumn
http://www.w3.org/TR/css3-multicol/

Answer 2

尝试一些css。

在行中添加一个类：

<li><!--column-->

类似的东西：

<li class="column"><!--column-->

然后你可以添加css规则：

.column{
 float:left;
}

这应该可以解决问题。

编辑：我仍然不确定我是否理解这个问题，但我会再试一次：）

<div class='column'>
<ul>
<li></li>
<li></li>
</ul>
</div>

<div class='column'>
<ul>
<li></li>
<li></li>
</ul>
</div>

.column{
 float:left;
}

使用浮动div更少浪费HTML代码？（对我来说，你的嵌套李似乎很完美）。

下拉布局 - 如何制作＆＃34;列＆＃34;

2 个答案: