Html 下拉式布局-如何制作；“列”；_Html_Css_Drop Down Menu_Multiple Columns

Html 下拉式布局-如何制作；“列”；

html css drop-down-menu

Html 下拉式布局-如何制作；“列”；,html,css,drop-down-menu,multiple-columns,Html,Css,Drop Down Menu,Multiple Columns,我有很多人使用的标准下拉布局，嵌套在元素中的元素。事情是这样的：我想让那些子元素显示在列中。假设我有20个项目，我想要四行五个元素。我通过在每组5个列表项周围输出一个标记来实现这一点，结果愚蠢地忘记了span不允许作为无序列表的直接子项。例如 <span class="col"> <li>Item</li> <li>Item</li> <li>Item</li> <li>

我有很多人使用的标准下拉布局，嵌套在

元素中的

元素。事情是这样的：我想让那些子

元素显示在列中。假设我有20个项目，我想要四行五个元素。我通过在每组5个列表项周围输出一个

标记来实现这一点，结果愚蠢地忘记了span不允许作为无序列表的直接子项。例如

<span class="col">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</span>


项目
项目
项目
项目
项目

这在视觉上很好，但显然无法验证。我已经到处寻找解决这个问题的方法，我真的被卡住了。有人知道如何在列中显示这些列表项吗？我还读过（不知道）

元素可能只有

、

和

作为父元素，目前没有太多用处。我能想到的最好的办法是

<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。有什么想法吗

谢谢，丹。

sTry和一些css

将类添加到行：

<li><!--column-->

这应该能奏效

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










.栏目{
浮动：左；
}

使用浮动div是否减少了对html代码的浪费？（因为在我看来，你的嵌套li看起来很完美）。

sTry带有一些css

将类添加到行：

<li><!--column-->

这应该能奏效

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










.栏目{
浮动：左；
}

使用浮动div是否减少了对html代码的浪费？（因为在我看来，你的嵌套li看起来很完美）。

如果IE 9和更早版本不是优先考虑的，你可以使用CSS列来实现你想要的：

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


项目1
项目2
爸爸1

儿童1
儿童2
儿童3
儿童4
儿童5
儿童6
儿童7
儿童8
儿童9
儿童10
儿童11
儿童12
孩子13


项目4
项目5
项目6

.parent list>li{
浮动：左；
}
.儿童名单{
位置：绝对位置；
宽度：400px；
-webkit列宽：100px；
-moz列宽：100px；
}
.child list>li{
宽度：100px；
}

POLYFILLS:

参考文献：

如果IE 9和更早版本不是优先考虑的，您可以使用CSS列来实现您想要的：

示例代码：

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


项目1
项目2
爸爸1

儿童1
儿童2
儿童3
儿童4
儿童5
儿童6
儿童7
儿童8
儿童9
儿童10
儿童11
儿童12
孩子13


项目4
项目5
项目6

.parent list>li{
浮动：左；
}
.儿童名单{
位置：绝对位置；
宽度：400px；
-webkit列宽：100px；
-moz列宽：100px；
}
.child list>li{
宽度：100px；
}

POLYFILLS:

参考文献：

您的示例标记在我看来确实不错：它非常健壮，可以跨浏览器工作。也就是说，您打算支持哪些浏览器？子项的顺序是否重要？最后，您是否有一个设计可以直观地显示您试图实现的目标？@CherryFlavourPez Hi，它确实有效（代码的顶部片段），但验证失败，因为它是

元素的直接子元素。我手头没有示例，但基本上它是一个全宽度下拉列表（例如960px），有4列。链接按如下方式排列：链接1、2、3、4、5，然后依次排列。然后，该模式继续以这种方式填充其余的列。您提供的嵌套的

HTML看起来不错，我同意。如果它的结构在语义上是正确的，那么它就不是浪费的HTML。您自己的HTML，请参阅这里的演示-您的跨浏览器要求是什么？需要IE支持吗？oldIE？您的示例标记在我看来很好：它很健壮，可以跨浏览器工作。也就是说，什么浏览器是y

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