如何正确缩进列表项

Question

我的页脚部分使用了列表项，地址略大，所以我放了一个break标记，以便正确格式化。

但是，正如您可以看到的那样，如果您运行我的代码段，则新行中的文字与顶部的文字不对齐。

如何让文字永远不会停留在图标下方，而是正确排列在顶部？

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;
}

<强>结果;

希望有所帮助，

Answer 2

将其包裹在span并使用margin-left:(40 + 10)=50px：

HTML：

 <li>12 Address Hojaile City, Switzerland, <br><span>0169</span></li>

的CSS：

span {
  margin-left: 50px;
}

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;
}

span {
  margin-left: 50px;
}

<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><span>0169</span></li>
</ul>

Answer 3

在class =＆＃34; box＆＃34;

中添加了一个div

＆＃13;

＆＃13;

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;
}
div.box { display: inline-block; vertical-align: middle; }

＆＃13;

<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><div class="box">12 Address Hojaile City, Switzerland, <br>0169</div></li>
</ul>

＆＃13;

＆＃13;

＆＃13;