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;
}