如何使用CSS在固定空间内放置数量可变的前置图片？

实现要求：

• 多行文本项（通常用<p>包裹）前可配置0-3个图标，最多展示3个
• 图标顺序固定：蓝色在最左、绿色居中、黄色在最右，每个图标支持空心圆、实心点两种样式
• 避免使用大量空标签占位，代码尽量精简易维护

直接用CSS Grid给每个列表项预设3个固定宽度的图标槽位+1个自适应文本槽位，不需要任何空标签占位，图标自动归位，文本天然对齐，多行换行也不会错位。

完整代码 #

<style>
/* 列表项基础布局：3个固定宽图标列 + 1个自适应文本列 */
.list-item {
  display: grid;
  grid-template-columns: 24px 24px 24px 1fr;
  column-gap: 8px;
  align-items: flex-start;
  margin: 8px 0;
  line-height: 24px;
}
/* 图标通用样式 */
.list-item [class^="icon-"] {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
/* 固定各颜色图标的列位置，缺省则自动留空 */
.icon-blue-outline, .icon-blue-solid {
  grid-column: 1;
}
.icon-green-outline, .icon-green-solid {
  grid-column: 2;
}
.icon-yellow-outline, .icon-yellow-solid {
  grid-column: 3;
}
/* 文本固定在第四列 */
.item-content {
  grid-column: 4;
}
/* 各图标对应背景图 */
.icon-blue-outline { background-image: url('img/circle-blue.png'); }
.icon-blue-solid { background-image: url('img/dot-blue.png'); }
.icon-green-outline { background-image: url('img/circle-green.png'); }
.icon-green-solid { background-image: url('img/dot-green.png'); }
.icon-yellow-outline { background-image: url('img/circle-yellow.png'); }
.icon-yellow-solid { background-image: url('img/dot-yellow.png'); }
</style>

<!-- 用法示例，缺哪个图标直接不写对应标签即可 -->
<p class="list-item">
  <span class="icon-blue-outline"></span>
  <span class="icon-green-solid"></span>
  <span class="icon-yellow-outline"></span>
  <span class="item-content">Item 1：三个图标全显示，长文本会自动在文本区域换行，所有行的文本左边缘完全对齐，不会侵入图标区域</span>
</p>
<p class="list-item">
  <span class="icon-blue-outline"></span>
  <span class="item-content">Item 2：仅显示蓝色图标，绿色、黄色位置自动预留空位，和其他项文本边缘对齐</span>
</p>
<p class="list-item">
  <span class="icon-green-solid"></span>
  <span class="item-content">Item 3：仅显示绿色图标，蓝色位置自动留空</span>
</p>
<p class="list-item">
  <span class="item-content">Item 4：无图标，文本直接从最左侧开始排版</span>
</p>

方案优势 #

• 无冗余代码：不需要写空span占位，有几个图标就加几个对应标签即可
• 对齐效果稳定：不管图标数量多少，所有文本左边缘完全对齐，多行文本换行也不会错位
• 维护简单：调整图标尺寸、间距只需要修改grid-template-columns的列宽和column-gap值，不需要逐个调整元素padding/margin
• 语义化友好：如果需要更符合列表语义，可以把外层<p>换成<li>，外层套<ul>清除默认列表样式即可，不需要改布局逻辑

如果需要兼容不支持Grid的老旧浏览器，可以直接把3个图标槽位做在一张雪碧图里，通过类名控制显示对应图标组合，完全不需要额外图标标签：

<style>
.list-item {
  padding-left: 104px; /* 3个图标位总宽度：24*3 + 8*4 = 104px */
  min-height: 24px;
  background-repeat: no-repeat;
  background-position: left center;
  line-height: 24px;
  margin: 8px 0;
}
/* 按图标组合定义对应雪碧图 */
.item-all-icon { background-image: url('img/sprite-all.png'); }
.item-only-blue { background-image: url('img/sprite-blue.png'); }
.item-only-green { background-image: url('img/sprite-green.png'); }
</style>
<p class="list-item item-all-icon">Item 1 三个图标全显示</p>
<p class="list-item item-only-blue">Item 2 仅显示蓝色图标</p>

这种方案需要提前把所有图标组合做成雪碧图，灵活度不如Grid方案，适合图标组合少的场景。

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