如何对齐含glyphicon的HTML列表项以避免内容重叠？

这个问题在带图标列表里太常见了——因为图标和文本是在同一行流里，文本一换行就会跑到图标下面，整个列表看起来乱糟糟的。分享几个实用的解决办法，你可以根据自己的布局需求选：

方法1：给图标设置固定宽度（最简单直接） #

既然图标是个独立的元素，咱直接给它分配一个固定宽度，让文本从这个宽度的右侧开始排列，换行自然就对齐了。

/* 针对Bootstrap glyphicon的样式调整 */
.glyphicon.glyphicon-ok {
  display: inline-block;
  width: 1.2em; /* 用em适配字体大小，比固定px更灵活 */
  text-align: center; /* 让图标在自己的小容器里居中 */
  margin-right: 0.5em; /* 图标和文本之间留点儿空隙 */
}

原理很简单：把图标转换成inline-block后，它就有了自己的宽高，文本会始终在它的右侧区域排列，哪怕换行也不会跑到图标下面。

方法2：用Flexbox布局（更灵活，适合复杂场景） #

如果你的列表项还有其他元素，或者需要更精细的对齐控制，Flexbox是更好的选择。把每个列表项变成flex容器，图标和文本作为独立的flex子项，文本部分自动占据剩余空间：

li {
  display: flex;
  align-items: flex-start; /* 让图标和文本顶部对齐，避免图标偏下 */
  margin-bottom: 10px; /* 可选，给列表项加个间距更美观 */
}

.glyphicon.glyphicon-ok {
  margin-right: 0.5em; /* 图标和文本的间距 */
}

/* 如果文本没有包裹在span里，也可以直接让文本区域占满剩余空间 */
li > *:nth-child(2) {
  flex: 1;
}

这种方法的好处是，不管图标大小怎么变，文本都会自动适应剩余空间，换行时完全对齐，而且还能轻松调整图标和文本的垂直对齐方式（比如改成align-items: center让它们垂直居中）。

方法3：替换成列表项自带的图标（适合纯图片图标） #

如果你愿意把glyphicon字体图标换成图片，也可以用CSS的list-style-image来实现，不过这种方法对字体图标不太友好，因为没法直接用：

ul {
  list-style-image: url('你的图标路径.png');
  padding-left: 2.5em; /* 调整缩进让文本对齐图标右侧 */
}

li {
  margin-bottom: 8px;
}

这个方法比较局限，只推荐给用图片图标的场景。

总的来说，方法1和方法2是最适合你的情况的，尤其是方法1，只需要几行CSS就能搞定，完全不改变HTML结构。

内容的提问来源于stack exchange，提问作者autop