如何删除水平列表换行符的边距？

Question

我有一个顶部导航栏，即使屏幕只有 320 像素宽，我也希望它始终可见。这是我所做的：

<nav>
  <ul>
  <li>Products</li>
  <li>Services</li>
  <li>Videos</li>
  <li>News</li>
  <li>Contact</li>
 </ul>
</nav>

我使用这个 CSS 水平显示列表：

nav li { float: left; }
nav li + li { margin-left: 30px; }

我最终得到了这个：

Products   Services    Videos    News    Contact

这很好，直到屏幕变小并且最后两个列表项被推到下一行，如下所示：

Products   Services    Videos    
      News    Contact

我需要像这样删除新行上第一个项目的左边距：

Products   Services    Videos    
News    Contact

如何做到这一点？我不介意完全改变我的 HTML 和 CSS 来实现它——只要可以做到！

Answer 1

您可以简单地应用 右 边距而不是左边距。这样当项目被分成新行时，它们之前不会有空格：

nav li { float: left; margin-right: 30px; }

<nav>
  <ul>
  <li>Products</li>
  <li>Services</li>
  <li>Videos</li>
  <li>News</li>
  <li>Contact</li>
 </ul>
</nav>

jsfiddle：https://jsfiddle.net/azizn/v1f9hL04/

Answer 2

交换它并改用margin-right

nav li { float: left; }
nav li:not(:last-child) { margin-right: 30px; }

nav { width: 250px; }  /* just to show the effect of a line break */

<nav>
  <ul>
  <li>Products</li>
  <li>Services</li>
  <li>Videos</li>
  <li>News</li>
  <li>Contact</li>
 </ul>
</nav>

另一个有用的选项是在每个项目的两侧添加相等的边距。

然后，如果布局允许，可以给父级一个相等的负边距，或者直接离开它，你会得到相同的结果，换行时全部左对齐

nav li { float: left }
nav li { margin: 0 15px }

nav ~ nav { margin-left: -15px }

nav { width: 250px; }  /* just to show the effect of a line break */

<nav>
  <ul>
  <li>Products</li>
  <li>Services</li>
  <li>Videos</li>
  <li>News</li>
  <li>Contact</li>
 </ul>
</nav>

<br><br><br>
<nav>
  <ul>
  <li>Products</li>
  <li>Services</li>
  <li>Videos</li>
  <li>News</li>
  <li>Contact</li>
 </ul>
</nav>