Question

我试图创建一个浮动到右侧的水平导航。一旦它浮动到右边，然后我将所有列表项浮动到左侧。最后一个列表项分为新行。

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

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

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

请使用上面的js小提琴链接查看示例

<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掉线/突破新线 - 为什么？

2 个答案: