如何实现多个ul元素inline-block横向排列？CSS布局问题求助

嘿，这个问题其实挺常见的——你已经找对了方向给<ul>加display: inline-block，但大概率是你的<li>被其他CSS规则影响了，导致它们也变成横向排列了。我来给你一步步解决：

核心解决方案：确保<li>保持块级元素特性 #

默认情况下，<li>是block元素，本来就会垂直排列。如果它们变成横向，肯定是有其他CSS覆盖了这个默认行为。下面是完整的可运行代码示例：

HTML结构

<div class="list-group">
  <ul class="horizontal-ul">
    <li>列表1项1</li>
    <li>列表1项2</li>
    <li>列表1项3</li>
  </ul>
  <ul class="horizontal-ul">
    <li>列表2项A</li>
    <li>列表2项B</li>
  </ul>
  <ul class="horizontal-ul">
    <li>列表3项X</li>
    <li>列表3项Y</li>
    <li>列表3项Z</li>
    <li>列表3项W</li>
  </ul>
</div>

CSS样式

/* 让每个<ul>横向排列 */
.horizontal-ul {
  display: inline-block;
  vertical-align: top; /* 关键：让所有<ul>顶部对齐，避免高度不同时错位 */
  margin: 0 15px; /* 给列表之间加横向间距，可选 */
  padding-left: 20px; /* 保留默认的列表缩进，可选 */
}

/* 强制<li>垂直排列，覆盖可能的全局样式 */
.horizontal-ul li {
  display: block; /* 显式设置为块级，确保垂直排列 */
  margin: 6px 0; /* 给<li>之间加垂直间距，提升可读性，可选 */
}

关键要点说明 #

1. <ul>的display: inline-block：这个设置是对的，它让多个列表在同一行排列，同时保留块级元素的特性（比如可以设置宽高、内边距）。
2. vertical-align: top：如果不同列表的<li>数量不一样，高度会有差异，加这个属性能让所有列表的顶部对齐，避免视觉上的错位。
3. <li>的display: block：这是解决你问题的核心！如果你的CSS里有全局规则（比如li { display: inline; }或者li { float: left; }），会把<li>改成横向排列，所以必须显式给目标<li>设置display: block，强制它们回到垂直布局。

排查小技巧 #

如果你还是遇到问题，可以打开浏览器开发者工具（按F12），选中任意一个<li>，查看它的**计算样式（Computed）**里的display属性：

• 如果不是block，找到对应的CSS规则（在Styles面板里），要么修改那个全局规则，要么用上面的.horizontal-ul li选择器来覆盖它。

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