按钮(各种宽度)沿导航栏均匀分布

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>

这个想法是使按钮均匀分布在导航栏上，第一个按钮刷新到左边距，右按钮刷新到右边距。我不只是想使导航栏居中，因为我需要第一个和最后一个按钮来粘在这些边距上。

我知道的扩展按钮的唯一方法是为除最后一个按钮之外的每个按钮添加右边距。问题是，如果我这样做，我可以非常接近让最后一个按钮达到正确的边距，但只是相当。

我读到了一个解决方案，其中按钮的宽度相等（例如，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

使用 ：first-of-type 和

：last-of-type 将第一个和最后一个 Li 浮动到所需位置，然后在其余 LI 之间共享剩余空间。

* {
  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>

Answer 2

我认为我实际上不明白你的意思，但如果我这样做，这就是我的解决方案：

使用它作为您的 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;
}