我正在创建一个位于页面底部的站点地图类型的菜单，可以快速访问站点结构的前两层。但是，我在格式化列表时遇到了问题，因此它们在包装时可以整齐地显示。
这是一张我想要达到的效果的图片:
然而，我最终得到的结果是这样的:
这里是简化的代码以显示问题，以及指向 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 - 格式化列表的水平列表，如何固定动态html的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10296616/