如何对齐列表项使其不重叠[重复]答案

【问题标题】：How to align list items so it does not overlap [duplicate]如何对齐列表项使其不重叠[重复]
【发布时间】：2018-06-16 08:02:34
【问题描述】：

HTML：

<ul>

<li>
<span class="glyphicon glyphicon-ok"></span>line 1 line 1 line 1 line 1 line 1 line 1 line 1
</li>

<li>
<span class="glyphicon glyphicon-ok"></span>line 2 line 2 line 1 line 1 line 1 line 1 line 1
</li>

</ul>

外观：

当列表描述重叠时，如何将它们对齐？

【问题讨论】：

标签： html css

【解决方案1】：

一个简单的方法是将display:flex添加到li：

ul {
  max-width: 200px;
}
li {
  display: flex;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul>
<li>
    <span class="fa fa-check"></span> line 1 line 1 line 1 line 1 line 1 line 1 line 1
  </li>

  <li>
    <span class="fa fa-check"></span> line 2 line 2 line 1 line 1 line 1 line 1 line 1
  </li>
</ul>

【讨论】：

【解决方案2】：

一种方法是将图标放在::before 伪元素中，然后将图标放置在每个列表项的左侧。

li {
  position: relative;
  display: block;
  width: 150px;
}

li:before {
  content: "\e013";
  font-family: 'Glyphicons Halflings';
  position: absolute;
  left: -1.5em;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul>
  <li>
    line 1 line 1 line 1 line 1 line 1 line 1 line 1
  </li>
  <li>
    line 2 line 2 line 1 line 1 line 1 line 1 line 1
  </li>
</ul>

【讨论】：