本文讲解如何仅用 display: inline-block 和 vertical-align 实现两个 水平并排、顶部对齐，同时确保 的默认项目符号（bullet）正确显示在行首，不因高度差异错位或消失。

本文讲解如何仅用 `display: inline-block` 和 `vertical-align` 实现两个 `

` 水平并排、顶部对齐，同时确保 `

` 的默认项目符号（bullet）正确显示在行首，不因高度差异错位或消失。

在纯 CSS 布局入门阶段，避免使用 Flexbox 或 Grid 是合理的学习路径。但需注意：

的项目符号属于列表项的生成内容（generated content），其垂直定位依赖于

自身的行框（line box）基线（baseline）

。当你将两个 inline-block 元素放入

内部时，若未统一 vertical-align，浏览器会按默认 baseline 对齐——这会导致较高元素“上推”整个行框，使 bullet 下沉甚至被裁剪。

✅ 正确解法：统一垂直对齐 + 重置段落边距

核心要点有三：

1. 所有 inline-block 子元素必须设置 vertical-align: top（而非仅 .div1），否则 .div2 仍按 baseline 对齐，破坏整体行高一致性；
2. 清除

   默认上下外边距（margin: 0）

   ，避免内部内容撑开行高、干扰对齐；
3. 不要将 .container 作为
4. 的直接子容器包裹两个 div
——它会引入额外块级上下文，导致 inline-block 失效；应让 .div1 和 .div2 直接作为
5. 的子元素。

以下是精简可靠的实现代码：

• Lorem ipsum dolor sit amet.

  Lorem ipsum dolor sit amet consectetur.

  Lorem, ipsum dolor sit amet consectetur adipisicing elit.

• Short label

  This is a longer description that wraps across multiple lines, demonstrating consistent alignment regardless of content height.

.div1,
.div2 {
  display: inline-block;
  vertical-align: top; /* 关键：全部设为 top */
}

.div1 {
  width: 200px;
  background-color: #d4edda;
}

.div2 {
  width: 500px;
  background-color: #cff7ff;
}

/* 消除段落默认间距，防止意外换行或行高膨胀 */
.div1 p,
.div2 p {
  margin: 0;
}

/* 可选：增强可读性（如添加分隔线或间距） */
li + li {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

⚠️ 注意事项与常见误区

• ❌ 错误做法：给 .container 设置 display: inline-block 并嵌套两个 div —— 这会让整个容器变成一个内联块，失去内部两列的独立对齐能力；
• ❌ 忘记 vertical-align: top 应用于 所有 inline-block 元素（包括 .div2），否则对齐失效；
• ❌ 保留

  默认 margin，易导致 .div2 实际高度大于 .div1，即使视觉对齐，行框仍被拉高，bullet 位置偏移；

• ✅ 推荐结构：
  →
  • → .div1 + .div2（同级兄弟元素），语义清晰且 CSS 控制最直接。

  该方案完全符合基础 CSS 要求，无需浮动、Flex 或 Grid，同时精准复现了预期效果：两列左对齐、顶部基准一致、项目符号稳定居左，适用于课程作业及早期实战练习。