同一行 3 类

Question

我想根据下面每个点的颜色给出解释。

整个页面是：

我的 HTML 特定区域代码：

<div class="dot-expl">
      <div class ="dot dot-red">Ended</div>
      <div class ="dot dot-green">Running</div>
      <div class ="dot dot-yellow">Ready to start</div>
    </div>

我的整个CSS代码：

 .dot-expl{
    display: flex;
    align-items: center;
    overflow:visible;
  }
  
  .dot {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: inline-block;
  }
  .dot-red {
    background-color: red;
  }
  .dot-green {
    background-color: green;
  }
  .dot-yellow {
    background-color: yellow;
  }

但结果是：

我找不到如何在点之间增加 space 以使文本可见

Answer 1

您可以使用伪 class ::before
我在两侧（左和右）为每个 .dot 设置了边距，以便在各个元素之间有一些 space。
你也可以给你的包装器一个固定的宽度，并在包装器上使用 justify-content 。但我认为这会让你运行陷入其他问题，具体取决于文本的长度。

.dot-expl {
  display: flex;
  align-items: center;
  overflow: visible;
}

.dot {
  margin: 0 5px;
  display: flex;
  align-items: center;
}

.dot::before {
  content: '';
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 2px;
}

.dot-red::before {
  background: red;
}

.dot-green::before {
  background: green;
}

.dot-yellow::before {
  background: yellow;
}

<div class="dot-expl">
  <div class="dot dot-red">Ended</div>
  <div class="dot dot-green">Running</div>
  <div class="dot dot-yellow">Ready to start</div>
</div>

同一行 3 类

Same line 3 classes

html

css

alignment