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

Question

我有一个顶部导航栏，即使屏幕宽度仅为320px，我也希望它始终可见。这就是我所做的：

gets_zero_init

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

search_results

我最终得到了这个：

<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 + li { margin-left: 30px; }

我需要删除新行上第一个项目的左边距，如下所示：

Products   Services    Videos    News    Contact

如何实现这一目标？我不介意完全改变我的HTML和CSS来实现它 - 只要它可以完成！

Answer 1

交换它并使用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>

Answer 2

您只需应用正确边距而不是左边距。这样当项目被分成新行时，它们之前就没有空格了：

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/