向右浮动 UL 会导致最后一个 LI drop/break 到新行 - 为什么？

Question

我正在尝试创建向右浮动的水平导航。一旦它向右浮动，然后我将所有列表项向左浮动。最后一个列表项换行。

当我删除任何边距属性时，问题就消失了。但是边距对我来说非常重要，因为我已经显示了要阻止的锚标记以使整个区域可点击。我这样做是为了触摸屏目的。

任何人都可以帮助我让我的 ul 中的所有单词都显示在一行中，因为它们都向右浮动，同时仍然使用边距和填充？

https://jsfiddle.net/samuelcrockford/4a8oovjs/1/#&togetherjs=P0dq57flOy

请参阅上面使用 js fiddle link 的示例

<nav>
  <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
  </ul>
</nav>


nav {
  float:right;
  overflow: auto;
}

nav ul {
  float:right;
  list-style: none;
}

nav ul li {
  float: left;
  margin-left: 4%;
}

nav ul li:first-child { margin-left: 0;}


nav ul li a {
  display: block;
  float: left;
  font-size: 1em;
  padding: 0 2%;
}

Answer 1

为 ul 标签添加 100% 宽度

    nav ul {
      width:100%;
    }

Answer 2

将所有元素的box-sizing属性设为border-box:

*{
    box-sizing: border-box;
}

这将在元素的完整宽度中包括边框宽度和填充大小 - 解决了填充方面的问题。

使用 px 个边距值来解决该问题。

向右浮动 UL 会导致最后一个 LI drop/break 到新行 - 为什么？

Floating UL right causes last LI to drop/break onto new line - WHY?

html

css

html-lists

css-float