如何将图标左侧与右侧文本对齐？

Question

我正在尝试将左侧的图标与右侧的文字正确对齐。

＆＃13;

＆＃13;

.firm-info {
  width: 280px;
}
.firm-info ul {
  margin-left: -15px;
}
.firm-info ul li {
  text-decoration: none;
  list-style-type: none;
  margin-bottom: 35px;
  font-size: 20px;
  display: flex;
}
.firm-info ul li i {
  float: left;
  font-size: 20px;
  width: 10px;
}
.firm-info p {
  float: left;
  max-width: 200px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

<div class="firm-info">
  <ul>
    <li>
      <i class="fa fa-info-circle"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis cursus nulla, tempus porttitor ex fringilla id. Donec cras amet.
      </p>
    </li>
    <li>
      <i class="fa fa-clock-o"></i>
    </li>
    <li>
      <i class="fa fa-building"></i>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

目前它看起来像这样：

最终版本应如下所示：

Answer 1

您应该重置p标记上的默认上边距，并增加i标记的宽度，或者只是删除宽度并使用一些正确的填充或边距作为间距。

<强> jsFiddle

＆＃13;

＆＃13;

.firm-info {
  width: 280px;
}
.firm-info ul {
  margin-left: -15px;
}
.firm-info ul li {
  list-style-type: none;
  margin-bottom: 35px;
  font-size: 20px;
  display: flex;
}
.firm-info ul li i {
  margin-right: 10px;
}
.firm-info ul li p {
  margin: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

<div class="firm-info">
  <ul>
    <li>
      <i class="fa fa-info-circle"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis cursus nulla, tempus porttitor.</p>
    </li>
    <li>
      <i class="fa fa-clock-o"></i>
      <p>Bla</p>
    </li>
    <li>
      <i class="fa fa-building"></i>
      <p>Bla</p>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;