Question

我有一个导航，里面有十个项目，我想最大化它的长度，并平均设置项目之间的空格。

到目前为止，这就是我所做的。但是，如果菜单项的长度相等，那么它看起来不错，但我的不是。想法，有人吗？提前谢谢。

<nav class="menu">
    <ul>    
        <li>Home</li>
        <li>About Us</li>
        <!-- eight more menu items -->
    </ul>
</nav>

这是我的样式表。

.menu {
    width: 100%;
}

.menu li {
    display: inline-block;
    width: 10%; /* since I have 10 items */
    text-align: center;
}

Answer 1

查看此codepen。

您需要将li个项目浮动。

CSS：

.menu {
  width: 100%;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu ul li {
  width: 8%;  
  text-align: center;
  margin: 0% 1%;
  float: left;
  padding: 0;
}

跟踪总宽度（100％）非常重要。在总计中，每件商品应为10％（因为您有10件商品）。这意味着当您希望左侧和右侧的边距为1％时，您的li项目的宽度应为8％。

您的总宽度应始终为100％。否则，您的用户将能够水平滚动。

Answer 2

在css文件中为li添加保证金。

.menu li {
    display: inline-block;
    margin-left:1%;
    width: 6%; /* since I have 10 items */
    text-align: center;
}

或者使用@media规则用于为不同的媒体类型/设备定义不同的样式规则

Answer 3

使用现代的flexbox技术解决方案。无需设置任何width或margin。

检查浏览器兼容性表：Flexbox

使用CSS Prefixer支持部分旧版浏览器：

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.menu ul {
  display: flex;
  flex-direction: row nowrap;
  justify-content: space-around;
}
.menu li {
  list-style: none;
}

＆＃13;

<nav class="menu">
  <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Home</li>
    <li>About Us</li>
    <li>Home</li>
    <li>About Us</li>
    <li>Home</li>
    <li>About Us</li>
    <li>Home</li>
    <li>About Us</li>


  </ul>
</nav>

＆＃13;

Answer 4

你可以将float css规则添加到 ul 元素。

.menu ul{padding:0px;}
.menu {
    width: 100%;
}

.menu ul li {
    float:left;
    width: 10%; /* since I have 10 items */
    text-align: center; 

}

尝试上面的代码

使用不同长度的项目最大化导航宽度

4 个答案: