html - 如何正确缩进列表项

Question

我在页 footer 分使用列表项，地址稍大，所以我放了一个分隔符以使其格式正确。

但是，正如您在运行我的代码片段时所看到的，新行中的文本与顶部的文本不对齐。

如何使文本永远不会停留在图标下方，而是正确地嵌入到顶部的图标中？

li:before {
  font-family: fontawesome;
  content: '\f192';
  padding-right: 10px;
  color: #cc3333;
}

li {
  list-style: none;
}

ul.contact_details li:last-child:before {
  content: '\f041' !important;
}

ul.contact_details li:before {
  padding-right: 0 !important;
}

ul.contact_details li:before {
  font-family: 'FontAwesome';
  display: inline-block;
  color: #cc3333;
  width: 40px;
  height: 40px;
  border: 1px solid;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  margin-right: 10px;
  margin-bottom: 5px;
  text-indent: 0;
  padding-right: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="contact_details">
  <li>+27 (0) 11 555 3333</li>
  <li>
    <a href="mailto:info@myemail.co.za">
  info@myemail.co.za</a>
  </li>
  <li>12 Address Hojaile City, Switzerland, <br>0169</li>
</ul>

Answer 1

使用 display:flex; 怎么样？ Here是的，

li{
  list-style: none;
  display:flex;
  line-height:2em;
}

结果；

希望有所帮助，