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

问题描述

在此处输入图像描述我通过一件简单的事情获得了堆栈...我正在尝试为我的页脚创建一个简单的导航。所以，我创建了一个并在其中放置了一个。该列表包含三个

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

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

标签： htmlcssflexbox

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

问题描述

解决方案

推荐阅读