网页中两个无序列表堆叠无法并排显示该如何解决？

无序列表<ul>默认是块级元素，宽度默认占满父容器整行，所以默认会上下堆叠，以下是三种常用的实现横向并排的方案：

方案1：使用inline-block（兼容性较好） #

将两个列表设置为行内块元素即可横向排列，需额外处理对齐和默认间距问题：

ul {
  display: inline-block;
  vertical-align: top; /* 保证两个列表顶部对齐，避免基线对齐导致的错位 */
  margin: 0 12px; /* 调整两个列表的横向间距，按需修改 */
  padding: 0; /* 重置浏览器默认的ul内边距 */
  /* 可手动设置宽度，比如 width: 45%; 实现两个列表接近平分父容器宽度 */
}

方案2：使用浮动（float） #

给两个列表设置左浮动实现横向排列，需要处理父容器高度塌陷问题：

/* 两个列表的共同父元素 */
.list-wrapper {
  overflow: hidden; /* 简易清除浮动方案，也可以用伪元素清除法适配更复杂场景 */
}
ul {
  float: left;
  margin: 0 12px;
  padding: 0;
}

方案3：使用Flex布局（最推荐现代方案） #

给列表的父容器开启Flex布局，无需处理浮动塌陷或者行内块间距问题，适配性更强：

/* 两个列表的共同父元素 */
.list-wrapper {
  display: flex;
  gap: 20px; /* 直接定义两个列表的横向间距，无需单独给子元素加margin */
  align-items: flex-start; /* 避免列表被默认拉伸高度 */
}
/* 如果需要两个列表平分父容器宽度，可给ul加以下样式 */
/* ul { flex: 1; } */

通用注意事项 #

• 可以按需重置ul的默认样式：list-style: none; 清除默认圆点，或者list-style-position: inside; 让圆点放在内容区域内
• 如果需要响应式效果，可搭配媒体查询在小屏设备下取消并排布局，恢复上下堆叠的适配效果。

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