如何实现多列列表项顶部对齐？ul/li布局问题咨询

不建议使用table标签 #

你的内容是分组的链接列表，属于文档内容的逻辑分组，table标签的语义是展示表格化数据，用它来做布局会破坏页面语义，既不利于搜索引擎抓取，也会影响无障碍访问工具的解析。

两种可行的解决方案 #

方案1：修改inline-block元素的垂直对齐

当前问题的核心是inline-block元素默认以**基线（baseline）**对齐，导致高度不同的ul底部对齐、顶部错位。只需给ul添加vertical-align: top即可修复：

修改后的CSS代码：

ul {
  display: inline-block;
  margin-left: 10px;
  list-style: none;
  vertical-align: top; /* 关键：设置顶部对齐 */
}

ul li:first-child {
  font-weight: bold;
}

方案2：使用Flexbox布局（更推荐）

Flexbox是现代CSS布局方案，天生支持灵活的对齐方式，无需处理inline-block的兼容性问题，还能更方便地控制间距和响应式调整：

第一步，给三个ul添加一个父容器：

<body>
  <div class="list-group">
    <ul class="box1">
      <li>实用链接</li>
      <li>内容</li>
      <li>工作原理</li>
      <li>创建</li>
      <li>探索</li>
      <li>条款与服务</li>
    </ul>
    <ul class="box2">
      <li>社区</li>
      <li>帮助中心</li>
      <li>合作伙伴</li>
      <li>建议</li>
      <li>博客</li>
      <li>通讯</li>
    </ul>
    <ul class="box3">
      <li>合作方</li>
      <li>我们的合作方</li>
      <li>成为合作方</li>
    </ul>
  </div>
</body>

第二步，编写Flexbox样式：

.list-group {
  display: flex;
  gap: 20px; /* 控制列表之间的间距，比margin更直观 */
}

ul {
  list-style: none;
  padding: 0; /* 移除默认内边距，避免布局偏移 */
}

ul li:first-child {
  font-weight: bold;
}

这个方案不仅能实现顶部对齐，还能轻松调整列表的排列方向、间距，适配不同屏幕尺寸。

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