格式化水平列表，如何固定动态html的高度

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

以下是我想要了解的内容：

然而，我最终得到的结果如下：

下面是显示问题的简化代码，以及指向

#页脚菜单{
浮动：左；
背景#4545；
颜色：#FFFFFF；
宽度：850px；
保证金：50px自动0自动；
填充：10px 10px 2px 10px；
显示：内联；
}
#页脚菜单ul{
填充：0；
列表样式类型：无；
左：自动；
溢出：自动；
}
#页脚菜单li{
利润率：0 20px 5px 0；
左侧填充：6px；
列表样式类型：无；
浮动：左；
显示：内联；
背景：无；
位置：相对位置；
字体系列：Arial；
字体大小：粗体；
左边框：1px实心#FFFFFF；
}
#页脚菜单{
保证金：5px0 5px0；
}
#页脚菜单ulli{
浮动：无；
填充：0；
边距：0 0 2px 0；
字体大小：正常；
显示：块；
宽度：自动；
边界：0；
}
#页脚菜单a{
文字装饰：无；
颜色：白色；
}
#页脚菜单a：悬停{
文字装饰：下划线；
颜色：白色；
}

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

---

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

可能您可以使用

：n子项

，因为这可能会对您有所帮助。这样写：

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

检查这个

但是第n个孩子不在IE中工作，请检查此项

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

检查这个

---

我还清理了一点你的代码，并减少边距，使前4个块可以排成一行。

谢谢您的回答，但我希望所有列表都从div的顶部开始。您的解决方案将垂直对齐设置为底部，会在顶部创建空间，这看起来有点奇怪。@Tony我的解决方案没有任何垂直对齐到底部的选项。请再次检查。对不起，我必须承认我没有读你的密码。Chrome的问题是，在浏览器中尝试JSFIDLE，列表垂直对齐到底部。酷，它在Chrome中不能正确显示。顺便说一下，我告诉过你，它在Firefox中工作得非常完美。：）“我告诉过你，它在Firefox中工作得非常完美”-公平点：）看起来不错，尽管我对右边的

边距有点怀疑：-70px#页脚菜单ul li ul

块中的code>属性。如果顶级项目名称更改了长度，我认为这将不得不更改。您的解决方案在FireFox中也不能很好地呈现，但我想这就是CSS解决方案的问题所在，总是存在浏览器不兼容的问题。

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