如何使用Flex将div内的li元素横向并排对齐？

你当前的问题在于flex布局加错了容器——你给.provinces-items这个div设置了display: flex，但真正需要控制li排列的是包含它们的<ul>元素（li的直接父容器）。默认情况下ul的子元素li是垂直块级排列，所以需要给ul应用flex布局。

修改后的CSS代码 #

.provinces {
  margin-top: 20px;
}

.provinces-header h3 {
  text-align: center;
}

/* 关键修改：给ul设置flex布局 */
.provinces-items ul {
  display: flex;
  list-style: none; /* 可选：去掉默认列表圆点 */
  padding: 0; /* 可选：去掉ul默认内边距 */
  justify-content: space-around; /* 控制li之间的间距，可根据需求调整为space-between/center等 */
}

.provinces-items ul li a {
  display: inline-block;
  text-decoration: none;
  padding: 10px 8%;
  /* justify-content和align-items是flex容器的属性，加在a上无效，已移除 */
}

说明 #

1. 把display: flex从.provinces-items移到.provinces-items ul上，让ul成为flex容器，li作为flex子元素自然横向排列。
2. 添加list-style: none和padding: 0是为了清除ul的默认样式，让布局更整洁，可根据需求保留或删除。
3. justify-content属性用于控制flex子元素（li）在主轴上的排列方式，选择适合你的间距规则即可。

这样修改后，所有li元素就会横向并排显示了。

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