Question

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

一旦达到项目距离太近的程度，我的媒体查询就会重新安排菜单。

我在制作'挤压'行为方面遇到了麻烦。一旦窗口大小减小，而不是挤压我的导航项目，它会将它们推到两行。

有没有办法只用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/。我不希望将物品推到两条线上，直到它们之间没有水平空间。

（我知道这可以通过一系列媒体查询来完成，这些查询会逐步减少项目之间的差距，但这会导致很多媒体查询，而且看起来并不优雅。）

谢谢

Answer 1

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

DEMO http://jsfiddle.net/kevinPHPkevin/q3gjg/1/

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

<强> EDITED

您声明您不希望使用媒体查询，因为您需要的金额，但在这种情况下，您只需要2

DEMO http://jsfiddle.net/kevinPHPkevin/q3gjg/3/

@media (max-width: 440px) {
   #menu li { margin-right:2%;} 
}
@media (max-width: 400px) {
   #menu li { margin-right:0;} 
}

Answer 2

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

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

demo

响应式菜单 - 减小调整大小的余量

2 个答案: