本文讲解如何仅用 display: inline-block 和 vertical-align 实现两个 <div> 水平并排、顶部对齐，同时确保 <li> 的默认项目符号（bullet）正确显示在行首，不因高度差异错位或消失。
本文讲解如何仅用 `display: inline-block` 和 `vertical-align` 实现两个 `
` 水平并排、顶部对齐，同时确保 `` 的默认项目符号（bullet）正确显示在行首，不因高度差异错位或消失。
在纯 CSS 布局入门阶段，避免使用 Flexbox 或 Grid 是合理的学习路径。但需注意：<li> 的项目符号属于列表项的生成内容（generated content），其垂直定位依赖于 <li> 自身的行框（line box）基线（baseline）。当你将两个 inline-block 元素放入 <li> 内部时，若未统一 vertical-align，浏览器会按默认 baseline 对齐——这会导致较高元素“上推”整个行框，使 bullet 下沉甚至被裁剪。
✅ 正确解法：统一垂直对齐 + 重置段落边距
核心要点有三：
- 所有 inline-block 子元素必须设置 vertical-align: top（而非仅 .div1），否则 .div2 仍按 baseline 对齐，破坏整体行高一致性；
- 清除 <p> 默认上下外边距（margin: 0），避免内部内容撑开行高、干扰对齐；
- 不要将 .container 作为 <li> 的直接子容器包裹两个 div——它会引入额外块级上下文，导致 inline-block 失效；应让 .div1 和 .div2 直接作为 <li> 的子元素。
以下是精简可靠的实现代码：
<ul>
<li>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="div2">
<p>Lorem ipsum dolor sit amet consectetur.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</li>
<li>
<div class="div1">
<p>Short label</p>
</div>
<div class="div2">
<p>This is a longer description that wraps across multiple lines, demonstrating consistent alignment regardless of content height.</p>
</div>
</li>
</ul>.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），否则对齐失效；
- ❌ 保留 <p> 默认 margin，易导致 .div2 实际高度大于 .div1，即使视觉对齐，行框仍被拉高，bullet 位置偏移；
- ✅ 推荐结构：<ul> → <li> → .div1 + .div2（同级兄弟元素），语义清晰且 CSS 控制最直接。
该方案完全符合基础 CSS 要求，无需浮动、Flex 或 Grid，同时精准复现了预期效果：两列左对齐、顶部基准一致、项目符号稳定居左，适用于课程作业及早期实战练习。
