3

我正在尝试设置我的水平菜单，以便它将我的导航项目“挤压”在一起，直到它们之间的空间被用完，在每个项目之间保持均匀的空间，因为它减少了。

一旦达到项目太靠近的程度，我的媒体查询将启动以重新排列菜单。

不过，我在创建“挤压”行为时遇到了麻烦。一旦窗口大小减小，而不是将我的导航项目向上挤压，而是将它们推到两条线上。

有没有办法只用 HTML 和 CSS 来解决这个问题？

到目前为止，这是我正在做的事情：

<nav id="menu">
    <ul>
        <li><a href="#">Menu item1</a></li>
        <li><a href="#">Menu item2</a></li>
        <li><a href="#">Menu item3</a></li>        
        <li><a href="#">Menu item4</a></li>
        <li class="last"><a href="#">Menu item5</a></li>
    </ul>
</nav>

和CSS：

#menu ul, #menu li { 
    margin:0; 
    padding:0; 
    list-style-type:none; 
}

#menu li { 
    float:left; 
    margin-right:4%; 
}

我也把它放到了一个小提琴中，所以你可以明白我的意思 - http://jsfiddle.net/q3gjg/。我不希望将项目推到两条线上，直到它们之间没有水平空间。

（我知道这可以使用一系列媒体查询来完成，这些查询逐步减少项目之间的边距，但这会导致大量媒体查询并且看起来不太优雅）。

谢谢

4

2 回答 2

4

你需要一种不同的方法。在这种情况下不要使用边距，使用宽度和百分比。

演示http://jsfiddle.net/kevinPHPkevin/q3gjg/1/

#menu li { 
    float:left; 
    display: block;
    width: 20%;
    text-align: center;
}

已编辑

您声明由于您需要的数量不希望使用媒体查询，但在这种情况下您只需要 2

演示http://jsfiddle.net/kevinPHPkevin/q3gjg/3/

@media (max-width: 440px) {
   #menu li { margin-right:2%;} 
}
@media (max-width: 400px) {
   #menu li { margin-right:0;} 
}
于 2013-07-21T09:16:17.233 回答
4

您可以尝试使用display: table-cell;您的列表而不是使用float: left;

#menu li {   
    padding-right:4%; 
    display: table-cell;
    width: 200px; /* give here your menu width */
}

演示

于 2013-07-21T09:26:42.147 回答