如何对齐列表项以使其不重叠

Question

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>

外观如何：

当列表说明重叠时，如何将它们直接对齐？

Answer 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>

Answer 2

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;