html - 对齐带有溢出的动态水平菜单中的菜单项

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/

在 ul 和 display:inline-block 上对包装 div、text-align:justify 应用固定宽度 在 li 上是必需的。

#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 注释。

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

重要:信用:@SamGoody从他的回答here .