html - 使用 CSS 使菜单流畅

Question

我尝试了不同的策略来使我的菜单流畅，但似乎都没有用。我目前有一个交互式菜单。有时我想要显示 6 个元素，有时我想要显示 7 个元素。

当我有 7 个元素时，菜单在整个宽度上正确对齐，但当我有 6 个元素时，菜单右侧有很多空间。

我不想在每次停用某个元素时都更改整个代码，并希望能够仅使用 CSS 来解决此问题。

是否可以用元素填满这个空间？我知道我可以用表格来做到这一点，但我不想使用表格。

HTML:

<nav id="menu_container">
    <ul id = "menu">
        <li class="menu_1 active"><a href="/home/" title="Home">Home</a></li>
        <li class="menu_2"><a href="/test/" title="test">test</a></li>
        <li class="menu_3"><a href="/test-2/" title="test 2">test 2</a></li>
        <li class="menu_4"><a href="/bigger-menu-item/" title="bigger-menu-item">bigger-menu-item</a></li>
        <li class="menu_5"><a href="/another-big-menu-item/" title="another-big-menu-item">another-big-menu-item</a></li>
        <li class="menu_6"><a href="/contact/" title="Contact">Contact</a></li>
    </ul>                   
</nav>

CSS:

#menu_container {
    background: transparent url('/img/menu-bg.png') no-repeat;
    float:left;
    position:relative;  
    z-index: 999999;
    width: 690px;
    height:42px;
    margin:29px 0 29px 19px;
}

#menu_container > ul {  
    padding: 0;
    margin: 0;
    margin-left:29px;
}

#menu_container > ul > li {
    color: #ffffff;
    float: left;
    list-style-image: none;
    position: relative;
    text-align:center;
    height:31px;
    padding:11px 7px 0;
}

当我为元素添加宽度时，某些元素会在两行中显示文本，但我不希望这样。

我希望我说清楚了我想做什么。谢谢。

更新:jsFiddle:http://jsfiddle.net/UDv2A/1/

Answer 1

如果你只想让内容居中，你可以移除 float 并将 li 显示为 inline-block:

#menu_container > ul {
    padding: 0;
    text-align: center;
}
#menu_container > ul > li {
    color: #ffffff;
    display: inline-block;
    list-style-image: none;
    position: relative;
    text-align:center;
    height:31px;
    padding:11px 7px 0;
}

参见 jsFiddle .

如果您还想扩展 li 的宽度，请使用 display: table;:

#menu_container > ul {
    padding: 0;
    margin: 0 auto;
    display: table;
    width: 100%    
}
#menu_container > ul > li {
    color: #ffffff;
    list-style-image: none;
    position: relative;
    text-align:center;
    height:31px;
    padding:11px 7px 0;
    display: table-cell;
    width: auto;
}

参见 jsFiddle .

如果您希望在缩小尺寸时保持流畅...请确保为 #menu_container 提供 100% 的宽度。