4

我正在创建一个位于页面底部的站点地图类型的菜单，以便快速访问站点结构的前两个级别。但是，我在格式化列表时遇到了麻烦，因此它们在包装时可以整齐地显示。

这是我要达到的目标的图片： 所需的页脚菜单布局

但是，我最终得到的结果是这样的： 格式错误的列表

这是简化以显示问题的代码，以及指向JSFiddle的链接

<html lang="en">
<head>
    <style type="text/css">
        #footer-menu { 
            float:left; 
            background:#454545; 
            color:#FFFFFF; 
            width:850px;
            margin:50px auto 0 auto; 
            padding:10px 10px 2px 10px; 
            display:inline;
        }
        #footer-menu ul { 
            padding:0; 
            list-style-type:none; 
            left:auto; 
            overflow: auto; 
        }
        #footer-menu li { 
            margin:0 20px 5px 0; 
            padding-left:6px; 
            list-style-type:none; 
            float:left; 
            display:inline; 
            background:none; 
            position:relative; 
            font-family:Arial; 
            font-weight:bold; 
            border-left:1px solid #FFFFFF;
        }
        #footer-menu ul li ul {
            margin:5px 0 5px 0;
        }
        #footer-menu ul ul li {
            float:none; 
            padding:0; 
            margin:0 0 2px 0; 
            font-weight:normal; 
            display:block; 
            width:auto; 
            border:0;
        }
        #footer-menu a { 
            text-decoration: none; 
            color: white;
        }
        #footer-menu a:hover {
            text-decoration: underline; 
            color: white;
        }
    </style>
</head>
<body>
    <div id="footer-menu">
        <ul>
            <li><a href="#">List 1 Title is quite looooong</a>
                <ul>
                    <li><a href="#">List 1 Item 1</a></li>
                    <li><a href="#">List 1 Item 2</a></li>
                    <li><a href="#">List 1 Item 3</a></li>
                    <li><a href="#">List 1 Item 4</a></li>
                    <li><a href="#">List 1 Item 5</a></li>
                    <li><a href="#">List 1 Item 6</a></li>
                    <li><a href="#">List 1 Item 7</a></li>
                    <li><a href="#">List 1 Item 8</a></li>
                </ul>
            </li>
            <li><a href="#">List 2 Short title</a>
                <ul>
                    <li><a href="#">List 2 Item 1</a></li>
                    <li><a href="#">List 2 Item 2</a></li>
                    <li><a href="#">List 2 Item 3</a></li>
                    <li><a href="#">List 2 Item 4</a></li>
                </ul>
            </li>
            <li><a href="#">List 3 Title of average length</a>
                <ul>
                    <li><a href="#">List 3 Item 1</a></li>
                    <li><a href="#">List 3 Item 2</a></li>
                    <li><a href="#">List 3 Item 3</a></li>
                </ul>
            </li>
            <li><a href="#">List 4 with no sub items</a></li>
            <li><a href="#">List 5 Should wrap under list 1</a> 
                <ul>
                    <li><a href="#">List 2 Item 1</a></li>
                    <li><a href="#">List 2 Item 2</a></li>
                    <li><a href="#">List 2 Item 3</a></li>
                    <li><a href="#">List 2 Item 4</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

列表中的项目来自站点地图 XML 文件，通过脚本生成 HTML，列表将随着页面添加到站点而更改，因此我正在寻找一种不需要我手动调整高度的解决方案列表，以使其正确格式化。

是否可以使用 CSS 来修复整行列表的高度，以便任何包装列表从新行的左侧开始？

4

3 回答 3

2

检查这个jsFiddle

在 Firefox 中完美运行。

改变了

#footer-menu li {
    margin:0 20px 5px 0;
    padding-left:6px;
    list-style-type:none;
    /*float:left;
      display:inline;
    */
    /*Added this */ 
    display:inline-table;

    background:none;
    position:relative;
    font-family:Arial;
    font-weight:bold;
    border-left:1px solid #FFFFFF;
}
于 2012-04-24T11:15:45.770 回答
1

也许你可以使用:nth-child这个可能对你有帮助。像这样写：

#footer-menu > ul > li:nth-child(5){
    clear:both;
}

检查这个http://jsfiddle.net/PV8Bq/1/

但是 nth-child 在 IE 中不起作用

于 2012-04-24T11:12:40.077 回答
0

检查这个jsFiddle

我还清理了一点您的代码，并减少了边距以允许 4 个前块连续放置。

于 2012-04-24T11:25:17.043 回答