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

如果您只想将内容居中，则可以移除浮动并将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％。

Answer 2

我还有另一个解决方案：

jsfiddle

/* five items */
#menu_container > ul > li:first-child:nth-last-child(5),
#menu_container > ul > li:first-child:nth-last-child(5) ~ li {
    width: 20%;
}


/* six items */
#menu_container > ul > li:first-child:nth-last-child(6),
#menu_container > ul > li:first-child:nth-last-child(6) ~ li {
    width: 16.66%;
    width: calc(100% / 6);
}

Answer 3

或者您可以尝试使用100％而不是固定宽度。

Answer 4

@pscheuller只是给了正确的方法来填充容器。

但我认为这种风格有一个问题，就我而言，就是项目的填充不一样。文本较长的项目将具有较大的填充。所以我更喜欢左右两边都有空格，将<ul>放在容器的中心，给每个项目添加相同的填充。

使用CSS制作菜单流畅

HTML：

CSS：

4 个答案: