如何创建带图标与文字的三列响应式布局？解决列表对齐问题

你用无序列表来做这个布局完全没问题，反而非常符合语义化的要求——毕竟这些都是并列的目标项，用<ul>再合适不过了！针对你遇到的对齐混乱、响应式适配的问题，我给你两种实用的解决方案，你可以根据自己的习惯来选择：

方案一：用Flexbox实现（延续你原来的思路） #

之前的对齐问题主要是因为只给父元素加了display:flex，但没有给列表项设置统一的伸缩规则，也没处理列表项内部的对齐。调整后就能完美解决：

1. 给<ul>设置基础的Flex布局，开启自动换行，同时用gap控制项之间的间距（比用margin更干净）；
2. 给每个<li>设置flex: 1 1 300px——这个属性的意思是：允许列表项放大/缩小，最小宽度为300px。这样大屏时会自动分成三列，屏幕缩小到单列不足300px时，会自动调整为两列，移动端直接变成单列；
3. 每个<li>内部也用Flex布局，让图标和文字垂直居中，同时给图标加右边距实现间距。

对应的CSS代码：

.goals-list {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  gap: 1.5rem; /* 列、行之间的间距 */
  max-width: 1200px;
  margin: 0 auto; /* 让布局居中 */
  padding: 0;
  list-style: none; /* 去掉默认的列表圆点，因为已经用FontAwesome图标了 */
}

.goals-list li {
  flex: 1 1 300px; /* 核心：最小宽度300px，可伸缩 */
  display: flex;
  align-items: center; /* 图标和文字垂直居中对齐 */
}

.goals-icon {
  margin-right: 0.5rem; /* 图标与文字的间距 */
  /* 可选：设置图标颜色、大小 */
  color: #2c3e50;
  font-size: 1.2rem;
}

方案二：用CSS Grid实现（更适合网格对齐场景） #

如果你觉得Flex的写法有点绕，CSS Grid是更直接的选择，天生就是为网格布局设计的，代码更简洁：

1. 给<ul>设置display: grid，用repeat(auto-fit, minmax(300px, 1fr))定义列规则——意思是：自动根据屏幕宽度适配列数，每列最小宽度300px，剩余空间平分给各列；
2. 同样用gap控制间距，列表项内部的对齐逻辑和Flex方案一致。

对应的CSS代码：

.goals-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 核心的响应式列规则 */
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.goals-list li {
  display: flex;
  align-items: center;
}

.goals-icon {
  margin-right: 0.5rem;
  /* 可选样式 */
  color: #2c3e50;
  font-size: 1.2rem;
}

为什么之前的对齐效果差？ #

你之前只给<ul>加了display:flex，但没有限制列表项的最小宽度，导致内容较短的列表项会被压缩得更窄，第二列的项自然没法在同一水平线对齐。现在通过flex-basis（Flex方案）或minmax（Grid方案）给每个列表项设置了统一的最小宽度，所有项在同一行的宽度都会保持一致，对齐问题就解决了。

两种方案都能完美满足你的需求：大屏三列、中等屏两列、移动端单列，同时图标和文字的间距也能轻松控制。选哪个全看你更熟悉哪种布局方式~

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