Justify-content: space-between 没有按预期工作

问题描述

希望得到一些帮助。所以，我想重新对齐第一张图片，使其看起来像第二张图片。我期待 space-between 在两者之间均匀分布空间，所以我一直在尝试使用 justify-content: space-between，但不幸的是它不起作用。知道为什么吗？

HTML

@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");

* {
  Box-sizing: border-Box;
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container {
  text-align: center;
}

.progress-container {
  display: flex;
  justify-content: space-between;
  width: 350px;
  max-width: 100%;
  border: 1px solid blue;
  position: relative;
  margin-bottom: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8" />
  <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="stylesheet" href="./css/style.css" />
  <title>Progress Bar</title>
</head>
<body>
<div class="container">
  <div class="progress-container">
    <div class="progress" id="progress"></div>
    <div class="circle active">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
  </div>
  <div class="btn-container">
    <button class="btn" id="prev" disabled>Prev</button>
    <button class="btn" id="next">Next</button>
  </div>
</div>
<script src="./js/main.js"></script>
</body>
</html>

提前致谢！

解决方法

因为在 div 之前还有另一个 circle 1。它应该被删除：

<div class="container">
  <div class="progress-container">
    <div class="circle active">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
    </div>
    <div class="btn-container">
      <button class="btn" id="prev" disabled>Prev</button>
      <button class="btn" id="next">Next</button>
  </div>
</div>

在这里试试这个小提琴：http://jsfiddle.net/usf9Lcdg/

发生这种情况是因为 id="progress" DIV 在行中占用了一个空格...

@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");

* {
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container {
  text-align: center;
}

.progress-container {
  display: flex;
  justify-content: space-between;
  width: 350px;
  max-width: 100%;
  border: 1px solid blue;
  position: relative;
  margin-bottom: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="stylesheet" href="./css/style.css" />
  <title>Progress Bar</title>
</head>
<body>
<div class="container">
    <div class="progress" id="progress"></div>
  <div class="progress-container">
    <div class="circle active">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
  </div>
  <div class="btn-container">
    <button class="btn" id="prev" disabled>Prev</button>
    <button class="btn" id="next">Next</button>
  </div>
</div>
<script src="./js/main.js"></script>
</body>
</html>

在 flex div 中，所有项目都具有相同的宽度，如果您设置空 div，那么它也被视为该 flex div 的一个项目，这就是为什么您的“进度”类 div 也获得相同宽度的原因，无论是否有数据在 div 中。

为了让你的愿望设计隐藏“进度”类。

.progress {
  display: none;
}

justify space-between