css - 为什么内联 div 的行为与跨度不同？

Question

给定以下两个 HTML 标记块：

<div style="overflow:auto; line-height:22px;">
  <div style="float:left; display:inline;">Write</div>
  <div style="float:left; display:inline; font-size:20px;">on the</div>
  <div style="float:left; display:inline; font-size:20px;">same line</div>
</div>

<div style="line-height:22px;">
  <span>Write</span>
  <span style="font-size:20px;">on the</span>
  <span style="font-size:20px;">same line</span>
</div>

为什么它们以不同的方式显示相同的东西？span 是一个内联元素，但文本“Write”与“on the”和“same line”的垂直对齐方式不同，无论 div 是否显示为内联。它不应该以完全相同的方式渲染线条吗？

Answer 1

你的 div 是浮动的。如果它们是浮动的，它们就不能内联。

如果您删除浮动（随后删除overflow: auto父级上的浮动，因为这不是必需的），那么它们的行为就像内联元素：

<div style="line-height:22px;">
  <div style="display:inline;">Write</div>
  <div style="display:inline; font-size:20px;">on the</div>
  <div style="display:inline; font-size:20px;">same line</div>
</div>