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浮动到所需位置，然后分享之间的剩余空间李的其余部分。

* {
  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 个答案: