列表超出父容器的宽度答案

【问题标题】：List exceeds width of parent container列表超出父容器的宽度
【发布时间】：2018-03-25 05:17:59
【问题描述】：

我想在标题中构建一个导航，其中包含三个项目，其中前两个左对齐，第三个右对齐。通过使用 flexbox 进行了尝试，但有一个错误：ul 超出了它的父容器的宽度。

header {
  width: 100%;
  background: #417690;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 20px;
  height: 70px;
}

header ul {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: center; */
}

header ul li {
  display: inline-block;
  padding-right: 15px;
  margin-left: 10px;
}

.filler {
  flex-grow: 1;
}

<header>
  <ul>
    <li><a href="#">Logo</a></li>
    <li><a href="#">New article</a></li>
    <li class="filler"></li>
    <li><a href="#">username</a></li>
  </ul>
</header>

我该如何解决这个问题？在 FF 和 Opera 中测试。

【问题讨论】：

填充项完全没有必要。使用弹性auto 边距。 stackoverflow.com/a/33856609/3597276
@Michael_B 不喜欢填充物，很高兴您提供了没有填充物的解决方案！

标签： html css flexbox html-lists

【解决方案1】：

将margin 重置为零并将box-sizing: border-box 添加到所有元素以将padding 包括在大小计算中。您还可以为 ul 元素重置 padding - 请参阅下面的演示：

* { /* ADDED */
  box-sizing: border-box;
}

header {
  width: 100%;
  background: #417690;
  /*margin-left: 10px;
  margin-right: 10px;*/
  font-size: 20px;
  height: 70px;
}

header ul {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: center; */
  padding: 0; /* ADDED */
}

header ul li {
  display: inline-block;
  padding-right: 15px;
  margin-left: 10px;
}

.filler {
  flex-grow: 1;
}

<header>
  <ul>
    <li><a href="#">Logo</a></li>
    <li><a href="#">New article</a></li>
    <li class="filler"></li>
    <li><a href="#">username</a></li>
  </ul>
</header>

【讨论】：

谢谢，这确实解决了问题。解释是什么？将宽度设置为 100% 是否会导致宽度为 (100% + padding + margin + border)？
@Sempervivum 在没有任何box-sizing 属性的情况下，是的。
@Sempervivum 你应该检查这个答案是正确的

【解决方案2】：

试试这个：

header ul {
    box-sizing: border-box;
    padding: 0;
}

【讨论】：

谢谢，这已经解决了。