Question

我尝试使用水平无序列表和flexbox创建一个非常基本的导航栏，但我的列表项目正在向右移动，我不明白为什么。

在我的示例中，我希望将列表项组合在一起并在较小的视口中居中，并均匀地分布在较大的视口中。这可以按预期工作，除了一切似乎略微向右移动。因此，在较小的视口中，内容永远不会完全居中，而在较大的视口中，我的第一个列表项之前会有一个间隙。

使用负边距可以帮助我在较大的视口中，但不能在较小的视口中使用。

我对CSS很新，所以我可能错过了一些明显的东西。

＆＃13;

.container {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  display: flex;
  list-style: none;
  background: black;
}

.container a {
  text-decoration: none;
  color: white;
  background: red;
}

@media all and (max-width: 600px) {
  .container {
    justify-content: center;
  }
  .container a {
    padding: 10px;
  }
}

＆＃13;

<div>
  <ul class="container">
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">WORK</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>

＆＃13;

Codepen

Answer 1

ul个元素（您的container）有一个默认填充，您需要将其设置为0。

.container {
  display: flex;
  justify-content: space-between;
  list-style: none;
  background: black;
  padding: 0;               /*  added property  */
}

.container a {
  text-decoration: none;
  color: white;
  background: red;
}

@media all and (max-width: 600px) {
  .container {
    justify-content: center;
  }
  .container a {
    padding: 10px;
  }
}

<div>
  <ul class="container">
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">WORK</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>

使用flexbox列出项目分发 - 一切都被推到了右侧

1 个答案: