Question

我正试图制作一个登录页面，但我正在努力使导航栏正常工作。基本上，应该将所有锚点以相等的填充量排成一排（因为我有4：25％），但似乎并没有这样做。

.navbar {
  width: 100%;
  height: 15%;
  background-color: yellow;
  margin: 0 auto;
  padding: auto;
  float: left;
}

.navbar h1 {
  text-align: center;
}

.navbar ul {
  width: 100%;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  float: left;
}

.navbar ul li {
  display: inline-block;
  padding-right: 25%;
  margin-top: 1.5%;
  float: left;
}

<div class="navbar">
  <h1>My Website</h1>
  <ul>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
  </ul>
  <div class="clear"></div>
</div>

Answer 1

这是因为将填充添加到项目的宽度上，所以所有填充的总和为宽度的100％，但是每个LI的实际内容的宽度使其超过100％，因此包装。

如果将其从右填充：25％更改为宽度：25％，您将看到它开始起作用。

尽管如此，我还是认真考虑了flex的布局，它要简单得多。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您可以使用flexbox完成行。

只需在CSS中进行以下更改：

.navbar ul {
  //your styles here
  display: flex;
}

.navbar ul li {
  display: block;
  //rest of your styles
}

您的提琴的更新版本：http://jsfiddle.net/hLeytf6u/1/

Answer 3

使用width: 25%;代替填充，如评论中所述。您可能还想添加box-sizing: border-box，以将您拥有*的任何边框或填充物添加到该width中，并且您可能希望使用text-align: center;来更好地分发li的内容/整页文字。

https://jsfiddle.net/45e9mpsL/

Answer 4

您可以将display:flex用于ul样式。您不再需要padding。

在display:flex;风格下使用justify-content: space-between;和ul，您将获得所需的结果。

请参见下面的代码段

.navbar {
  width: 100%;
  height: 15%;
  background-color: yellow;
  margin: 0 auto;
  padding: auto;
  float: left;
}

.navbar h1 {
  text-align: center;
}

.navbar ul {
  width: 100%;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  float: left;
    display:flex;
    justify-content: space-between;
}

.navbar ul li {
  display: inline-block;
  margin-top: 1.5%;
  float: left;  
}

<div class="navbar">
  <h1>My Website</h1>
  <ul>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
  </ul>
  <div class="clear"></div>
</div>

您也可以here对其进行测试。

最后一个<li>转到新行

4 个答案: