沿导航栏均匀分布按钮（各种宽度）

Question

我有一个包含 7 项的基本导航栏：

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">Management</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Development Services</a></li>
        <li><a href="#">Newsroom</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

我们的想法是让按钮在导航栏中均匀分布，第一个按钮刷新到左边距，右边的按钮刷新到右边距。我不只是想将导航栏居中，因为我需要第一个和最后一个按钮保持这些边距。

据我所知，展开按钮的唯一方法是为除最后一个以外的每个按钮都添加 margin-right。问题是，如果我这样做，我可以非常接近让最后一个按钮到达右边距，但只是非常接近。

我阅读了一个解决方案，其中按钮的宽度百分比相等（例如，4 个按钮，每个按钮的宽度为 25%），但在我的例子中，我有长按钮和短按钮，我希望按钮之间的空间保持不变持续的。我怎样才能让他们自动分发？

这是我现在正在使用的 css（导航栏为 836 像素宽，所有按钮之间的间距为 16px）：

header nav{
padding: 12px 62px;
width:836px;
margin-left: auto;
margin-right: auto;
}

header nav ul {
list-style-type: none;
}

header nav ul li{
display: inline-block;
}

header nav ul li a{
margin-right:16px;
}

header nav ul li:last-child a{
margin-right:0px;
}

感谢您的帮助。

Answer 1

我不认为我真正理解你的意思，但如果我这样做了，这就是我的解决方案：

将此用作您的 CSS 文件：

header nav{
padding: 12px 62px;
width:836px;
margin-left: auto;
margin-right: auto;
}

header nav ul {
list-style-type: none;
}

header nav ul li{
display: inline-block;
}

header nav ul li a{
margin-right:16px;
}

header nav ul li:last-child a{
margin-right:0px;
}

ul li {
display: inline;
}

Answer 2

使用 :first-of-type 和 :last-of-type 将第一个和最后一个 Li 浮动到所需位置，然后在其余 LI 之间共享剩余的 space。

* {
  margin: 0 auto!important;
}

ul {
  text-align: center; /* Distribute the none floated LI'S evenly */
  width: 650px;
  padding: 0;
}

ul li {
  display: inline;
  padding: 0 10px 0 10px;
  margin: 0;
}

ul li:first-of-type { /* Refers to the first Li */
  float: left;
  padding-left: 0;
}

ul li:last-of-type { /* Refers to the last Li */
  float: right;
  padding-right: 0;
}

<ul>
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Company</a>
  </li>
  <li><a href="#">Management</a>
  </li>
  <li><a href="#">Projects</a>
  </li>
  <li><a href="#">Development Services</a>
  </li>
  <li><a href="#">Newsroom</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

沿导航栏均匀分布按钮（各种宽度）

Even distribution of buttons (various widths) along nav bar

html

css

navigation