如何用CSS对齐不同div中的无序列表？解决响应式对齐问题

问题 #

当屏幕尺寸缩小时，工作经历与教育经历板块的无序列表无法对齐。教育板块因文本内容较长，在使用justify-content: space-around属性时，无法与工作经历板块对齐。不想使用space-between（会造成中间间距过大），也不想用flex:1（对齐耗时），请问该如何解决此问题？

现有代码 #

CSS代码

.info {
  display: flex;
  color: #FFFFFF;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 40px;
  gap: 12px;
}

.personal {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-indent: 12px;
  gap: 6px;
}

.info ul {
  display: flex;
  list-style-type: none;
}

.info ul li {
  font-weight: 400;
}

.experience {
  color: #282726;
  background-color: #D6CAB0;
}

.personal-experience {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-around;
  gap: 24px;
}

HTML代码

<section class="experience">
  <h1>Experience & Education</h1>
  <div class="personal-experience">
    <div class="work-experience">
      <div class="info">
        <h2>SOFTWARE ENGINEER</h2>
        <ul class="personal">
          <li>MABUHAY INCORPORATED</li>
          <li>(NOVEMBER 2020 - APRIL 2024)</li>
        </ul>
      </div>
      <div class="info">
        <h2>FRONT END DEVELOPER</h2>
        <ul class="personal">
          <li>NARRA INCORPORATED</li>
          <li>(DECEMBER 2019 - NOVEMBER 2020)</li>
        </ul>
      </div>
    </div>
    <div class="education">
      <div class="info">
        <h2>BACHELOR DEGREE - BSCS</h2>
        <ul class="personal">
          <li>YEAR 2015 - 2019</li>
          <li>SCHOOL: UNIVERSIDAD DE SAN JUAN</li>
          <li>ADDRESS: CANLAUN LAGAYAN CITY FINLAND</li>
        </ul>
      </div>
    </div>
  </div>
</section>

解决方法 #

核心思路是让工作经历和教育经历板块保持统一的基准宽度，同时调整内部列表的对齐逻辑，避免space-around带来的布局不一致问题。

修改后的CSS代码 #

.info {
  display: flex;
  color: #FFFFFF;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 40px;
  gap: 12px;
}

.personal {
  display: flex;
  flex-direction: column;
  /* 替换space-around为flex-start，让列表项统一靠左对齐 */
  justify-content: flex-start;
  text-indent: 12px;
  gap: 6px;
}

.info ul {
  display: flex;
  list-style-type: none;
}

.info ul li {
  font-weight: 400;
}

.experience {
  color: #282726;
  background-color: #D6CAB0;
}

.personal-experience {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  /* 保留space-around维持原有布局美感 */
  justify-content: space-around;
  gap: 24px;
}

/* 关键：给两个板块设置统一的基础宽度和最小宽度 */
.work-experience, .education {
  flex-basis: 400px; /* 根据实际布局需求调整，确保宽度匹配 */
  min-width: 300px; /* 适配小屏幕的最小宽度阈值 */
}

方案说明 #

1. 统一板块宽度：通过flex-basis和min-width约束工作经历与教育经历板块的宽度范围，从根源上消除因宽度差异导致的对齐偏差。
2. 调整列表对齐：将.personal的justify-content改为flex-start，让教育板块的列表项和工作经历的列表项保持一致的靠左对齐逻辑，避免内容长度影响间距。
3. 保留原有布局优势：继续使用justify-content: space-around和flex-wrap: wrap，既保证大屏幕下的布局美观，也能让小屏幕自然换行并维持对齐效果。

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