使用溢出对齐动态水平菜单中的菜单项

Question

我正在寻找一种方法来制作水平菜单，其中菜单项在宽度上对齐，具有填充，并且当菜单项的数量超过容器空间时溢出到新行。
HTML：

<div id='upper-menu-wrapper'>
<div id='upper-menu'>
    <ul>
        <li>About</li>
        <li>Parenting</li>
        <li>Receipes</li>
        <li>Devotional</li>
        <li>DIY Projects</li>
        <li>Home-making</li>
        <li>Pregnancy</li>
        <li>Frugal Living</li>
    </ul>
 </div>
</div>

CSS：

#upper-menu-wrapper {
    width: 100%;
}
#upper-menu {
    width: 1200px;
    margin: 0 auto;
    overflow: auto;
}
#upper-menu > ul {
    list-style-type: none;
    text-align: justify;
    width: 100%;
}
#upper-menu > ul > li {
    display: inline-block;
    padding: 1em;
    text-align: center;
}

Answer 1

让元素通过换行到下一行来证明是很棘手的。使用display:table 和table-cell 可以证明像表格这样的元素，但只能在一行中。因为您的要求是在包装在固定宽度的容器中时还要保持元素对齐，所以 table-cell 将不起作用。

有一个基于 :after 伪元素的 hack，它可以通过跨行换行来实现这一点。

演示：http://jsfiddle.net/abhitalks/MXZ6w/3/

需要对div 上的div、text-align:justify 和li 上的display:inline-block 应用固定宽度。

#upper-menu-wrapper {
    width: 500px; /* fixed width on wrapping container */
}
#upper-menu { } /* this div is not really needed */

#upper-menu > ul {
    list-style-type: none; /* getting rid of bullets */
    margin: 0px; padding: 0px; /* getting rid of default indents */
    text-align: justify; /* important to justify contents */
}
#upper-menu > ul > li {
    display: inline-block; /* required. float won't work. */
    text-align: left; /* to properly align list items */
    white-space: no-wrap; /* to prevent wrapping of list items if required */
}

#upper-menu > ul:after { 
    /* this is the hack without which the list items won't get justified */
    content:''; display: inline-block; width: 100%; height: 0; 
}

注意 1：display: inline-block 是必需的，但它会生成 html 空格。为了摆脱这些空白，可以在列表项的标记中使用 html cmets。

注 2：hack 中的 :after 伪元素似乎可以解决问题。但是，这会在ul 下方创建一个意想不到的空间。这个空间似乎在那里，因为元素被冲过。如果不合理，则该空格不会出现。

重要提示：信用：@SamGoody 来自他的回答 here。