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

【问题标题】：Even distribution of buttons (various widths) along nav bar沿导航栏均匀分布按钮（各种宽度）
【发布时间】：2015-01-25 02:39:40
【问题描述】：

我有一个包含 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 像素，所有按钮之间的间距为 16 像素）：

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;
}

感谢您的帮助。

【问题讨论】：

标签： html css navigation

【解决方案1】：

使用 :first-of-type 和 :last-of-type 将第一个和最后一个 Li's 浮动到所需位置，然后在两个 Li's 之间共享剩余空间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>

【讨论】：

【解决方案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;
}

【讨论】：