同一行3类

Question

我想根据下面的每个点的颜色提供解释。

整个页面是：

我的Spesific领域的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;
  }

但结果是：

我找不到如何在点之间提供更多空间，因为可以看到文本

Answer 1

您可以通过使用pseudo class ::
使用这种方法来完成此方法
我为每个dot设置了一个边距（左）（左），以在单个元素之间具有一定的空间。
您还可以给包装器一个固定宽度，并在包装​​器上使用josify-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>