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

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

您可以简单地应用右边距而不是左边距。这样当项目被换行时，它们之前不会有 space:

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>

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

How to remove margin on horizontal list line break?

css

responsive-design

responsive