Question

我想在包含三个项目的标题中构建一个导航，其中前两个对齐左，第三个对齐。通过使用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中测试过。

Answer 1

试试这个：

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

Answer 2

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

＆＃13;

* { /* 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;
}

＆＃13;

<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>

＆＃13;

列表超出父容器的宽度

2 个答案: