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

Question

我正在尝试在这里实现此UI

我试过

CSS

<style type="text/css">

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

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

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

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

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



</style>

HTML

<div class="row cb-key-row ">
  <div class="col-sm-4 col-md-4 col-lg-4">
    <div id="cb-key-danger" ></div>
    <span> &lt; 50% CLASS AVERAGE SCORE </span>
  </div>

  <div class="col-sm-4 col-md-4 col-lg-4">
    <div id="cb-key-warning" ></div>
    <span> 50% UP TO 75% CLASS AVERAGE SCORE </span>
  </div>

  <div class="col-sm-4 col-md-4 col-lg-4">
    <div id="cb-key-success" ></div>
    <span> &gt; OR EQUAL TO 75% CLASS AVERAGE SCORE </span>
  </div>
</div>

结果

如何让我的文字留在我的图标旁边？

CalledProcessError

Answer 1

您需要为方格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;
}

Answer 2

你可以用：

1 display：inline-block;

你的容器行为就像字符（例如span） 您可以使用行高确定位置。

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

或为您的范围设置margin-left并： 设置背景图标/设置位置绝对

示例http://jsfiddle.net/kgk2yrs9/1/