为何HTML div显示异常？inline-block布局右侧面板下移问题

你碰到的这个错位问题，核心原因其实是inline-block元素默认采用基线对齐（vertical-align: baseline）——这是CSS里inline级元素的默认行为，很多开发者都会在这里踩坑。

当你把两个面板设为inline-block后，浏览器会自动把它们的基线对齐。而基线的位置是由元素内部的inline内容（比如文本、表单控件）决定的：你的左面板里有下拉选框、单选按钮，右面板是复选框，这些控件的基线位置本来就存在差异，结果就导致右侧面板被“拽”得往下偏移，没法和左侧面板顶部齐平。

最直接的解决办法，就是给两个面板显式设置顶部对齐属性：

#left-pane, #right-pane {
  border: 1px solid white;
  display: inline-block;
  width: 20em;
  height: 40em;
  vertical-align: top; /* 加上这一行就搞定 */
}

设置vertical-align: top后，两个inline-block元素就会以各自的顶部边缘对齐，彻底解决错位问题，而且完全符合你的需求，不用切换到float布局。

为什么float能避免这个问题？因为float元素会脱离正常的文档流，不再参与inline级元素的基线对齐规则，所以不会出现错位。但既然你想坚持用inline-block，上面的vertical-align方案是最简洁、最符合规范的做法。

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