Html 使文本与图标保持在同一行的最佳方法是什么？

我试图在这里实现这个UI

---

我试过了

CSS

#关键危险{
宽度：15px；
高度：15px；
背景色：#F46E4E；
}
#cb键警告{
宽度：15px；
高度：15px；
背景色：#F9C262；
}
#关键成功{
宽度：15px；
高度：15px；
背景色：#ADB55E；
}
.cb键行{
背景色：#E2；
字体大小：10px；
}
.cb键行跨度{
显示：内联；
}

---

HTML

50%的班级平均分
50%至75%的班级平均分数
或等于班级平均分数的75%

---

结果

我怎样才能使我的文字停留在我的图标旁边

---

您需要为正方形div设置

display:inline block

：

#cb-key-danger{
  width: 15px;
  height: 15px;
  background-color: #F46E4E;
  display: inline-block;
}

#cb-key-warning{
  width: 15px;
  height: 15px;
  background-color: #F9C262;
  display: inline-block;
}

#cb-key-success{
  width: 15px;
  height: 15px;
  background-color: #ADB55E;
  display: inline-block;
}

.cb-key-row{
  background-color: #E2E2E2 ;
  font-size: 10px;
}

.cb-key-row span {
 display: inline;
}

您可以通过以下方式完成：

1显示：内联块； 您的容器行为如chars（例如span） 您可以使用线高度固定位置

#cb-key-danger {
    width: 15px;
    height: 15px;
    background-color: #F46E4E;
    display: inline-block;
}

或为跨度设置左边距，并： 设置背景图标/设置绝对位置

---

示例

它必须是内联块，因为定义了宽度和高度。@噢！对内联元素不能有宽度和高度。绝对定位是个坏主意。

#cb-key-danger{
  width: 15px;
  height: 15px;
  background-color: #F46E4E;
  display: inline-block;
}

#cb-key-warning{
  width: 15px;
  height: 15px;
  background-color: #F9C262;
  display: inline-block;
}

#cb-key-success{
  width: 15px;
  height: 15px;
  background-color: #ADB55E;
  display: inline-block;
}

.cb-key-row{
  background-color: #E2E2E2 ;
  font-size: 10px;
}

.cb-key-row span {
 display: inline;
}

#cb-key-danger {
    width: 15px;
    height: 15px;
    background-color: #F46E4E;
    display: inline-block;
}