使用 flexbox (justify-content: space-between/around) 属性创建导航栏时如何避免右侧出现额外空间答案

【问题标题】：How to avoid an extra space on the right while creating a navigation bar using flexbox (justify-content: space-between/around) properties使用 flexbox (justify-content: space-between/around) 属性创建导航栏时如何避免右侧出现额外空间
【发布时间】：2023-03-25 10:32:01
【问题描述】：

enter image description here我通过一个简单的事情获得了堆栈... 我正在尝试为我的页脚创建一个简单的导航。所以，我创建了一个并在其中放置了一个。该列表包含三个

并且它们每个都有一个内部。我希望我的列表项水平放置，它们之间/周围有空格。因此，我决定在这种情况下使用 flexbox。问题是，当我将我的显示属性值设置为 flex 并将 justify-content 设置为 center 时，它可以按预期工作（即所有相互粘在一起的列表项都是水平居中的），但是，只要我设置 justify-content到“space-between”或“space-around”，我在内容的右侧获得了一个额外的空间，这使得这个空间比内容左侧的空间大三倍。我试图在历史上搜索这个主题，但没有找到类似的东西。谷歌搜索给我带来了一个潜在的解决方案——将 flex:1 设置为每个列表项。但在这种情况下，我放松了项目之间的差距，这不是我的意图。下面我提供了问题的图片和我的测试代码 sn-ps。另一个观察结果是，在代码 sn-ps 程序（JSFiddle 或 Code Pen）中一切都很好...... Problem illustration

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.footer {
  height: 100vh;
  background: grey;
  position: relative;
}
.container {
  width: 90%;
  height: 30vh;
  margin: auto;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}

.nav {
  background: white;
  height: 100%;
}

.list {
  height: 100%;
  list-style-type: none;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.item {
  min-width: 30%;
  background: grey;
}

<div class="footer">
    <div class="container">
      <nav class="nav">
        <ul class="list">
          <li class="item"><a href="">1</a></li>
          <li class="item"><a href="">2</a></li>
          <li class="item"><a href="">3</a></li>
        </ul>
      </nav>
    </div>
  </div>

【问题讨论】：

从你的 sn-p 看来一切正常
没错，这就是我要说的——由于某种原因，这段代码在我的本地主机中无法正常工作
你为什么有absolute的职位？在图片中，你得到了一个带有 ::after 伪元素的 clearfix 解决方案，它可能会在 Safari 中搞砸。

标签： html css flexbox

【解决方案1】：

您的代码 sn-p 没问题。不过，在您的屏幕截图中，您似乎还有更多的 CSS 内容。

我在您的屏幕截图中看不到完整的 CSS-sn-p，我可能完全错了：它看起来像是 clearfix-hack 的一部分，您缺少 ::before 部分。因为仅在 ::after 中添加空格将具有您所描述的效果。它可能是前浮动结构的残骸，因此您可以删除 ::after 部分。

【讨论】：