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上应用固定宽度，text-align:justify上的ul和display:inline-block上的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。

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

1 个答案: