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

HTML:

1号线1号线1号线1号线1号线1号线1号线


2号线2号线1号线1号线1号线1号线

外观：

---

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

一个简单的方法是将

display:flex

添加到

li

：

ul{
最大宽度：200px；
}
李{
显示器：flex；
}

1号线1号线1号线1号线1号线1号线1号线


2号线2号线1号线1号线1号线1号线

一种方法是将图标放在伪元素前面的

：，然后将图标放在每个列表项的左侧


li{
位置：相对位置；
显示：块；
宽度：150px；
}
李：以前{
内容：“\e013”；
字体系列：“字形图标半身人”；
位置：绝对位置；
左：-1.5em；
}



1号线1号线1号线1号线1号线1号线1号线


2号线2号线1号线1号线1号线1号线


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