CSS：图标和文字并排，两个文本之间有空格

Question

我正在制作一个带有图标和两个跨度到右侧的div。

就像在图像中一样

＆＃13;

＆＃13;

.widgets_div {
  border-bottom: thin #edf1f2 solid;
  padding: 22.85px 0;
}

.widgets_div .icon_div {
  display: inline;
  margin-left: 15px;
}

.widgets_div .icon_div span i {
  font-size: 24px;
}

.widgets_div .text_div {
  display: inline;
  margin-left: 10px;
}

.widgets_div .text_div span {
  color: #58666e;
  font-size: 12px;
}

.widgets_div .text_div span+span {
  color: #747F85;
  font-size: 11px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="widgets_div">
  <div class="icon_div">
    <span><i class="fa fa-calendar"></i></span>
  </div>
  <div class="text_div">
    <span>Upcoming Events</span><br>
    <span>Description</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我试过这段代码但是我无法得到预期的结果。

任何帮助都会很棒。

谢谢。

Answer 1

使用display: inline-block;代替

＆＃13;

＆＃13;

.widgets_div {
  border-bottom: thin #edf1f2 solid;
  padding: 22.85px 0;
}

.widgets_div .icon_div {
  display: inline-block;
  margin-left: 15px;
  vertical-align:middle;
}

.widgets_div .icon_div span i {
  font-size: 24px;
}

.widgets_div .text_div {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}

.widgets_div .text_div span {
  color: #58666e;
  font-size: 12px;
}

.widgets_div .text_div span+span {
  color: #747F85;
  font-size: 11px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="widgets_div">
  <div class="icon_div">
    <span><i class="fa fa-calendar"></i></span>
  </div>
  <div class="text_div">
    <span>Upcoming Events</span><br>
    <span>Description</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

.widgets_div {
   border-bottom: thin #edf1f2 solid;
   padding: 22.85px 0;
   display: flex;
   align-items: center;
}

Answer 3

请检查此jsFiddle

请在您的css中替换此代码

MongoClient(final List<ServerAddress> seeds)