格式化列表的水平列表,如何修复动态html的高度

我正在创建一个站点地图类型的菜单,位于页面底部,可以快速访问站点结构的前两个级别.但是我无法格式化列表,因此它们在包装时会整齐地显示出来.

这是我想要达到的目标的图片：

但是,我最终得到的结果如下：

这是为简化问题而编写的代码,以及指向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来修复整行列表的高度,以便任何包装列表从新行的左侧开始？

解决方法

检查这个 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;
}

格式化列表的水平列表,如何修复动态html的高度

解决方法

相关文章