CSS:元素在文本上滑动

Question

我对 CSS 很陌生。我定义了一个具有不同颜色的点元素。

/*Dots*/
.ccrdot {
  display: inline-block;
  position: absolute;
  background-color: #8d8d8d;
  border-radius: 50%;
  opacity: 0.5;
  width: 10px;
  height: 10px;
  pointer-events: none;
}

.ccrdot.red {
  background-color: #FF0000;
}

.ccrdot.yellow {
  background-color: #fffb09;
}

.ccrdot.green {
  background-color: #67ff09;
}

但是当我这样使用时:

> <span class="ccrdot"></span><span>Text Text Text</span>

<span class="ccrdot"></span> Text Text

或

<div class="ccrdot"></div> Text Text

文本在点元素下滑动。我想并排展示它们。我做错了什么？

谢谢。

Answer 1

position: absolute 将它们从文本流中移除，因此不再为它们保留空间，如果您将其移除，它们将拥有自己的空间。

/*Dots*/
.ccrdot {
  display: inline-block;
  background-color: #8d8d8d;
  border-radius: 50%;
  opacity: 0.5;
  width: 10px;
  height: 10px;
  pointer-events: none;
}

.ccrdot.red {
  background-color: #FF0000;
}

.ccrdot.yellow {
  background-color: #fffb09;
}

.ccrdot.green {
  background-color: #67ff09;
}