给定以下两个 HTML 标记 block :
<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 显示为内联。它不应该以完全相同的方式呈现线条吗?
最佳答案
您的 div 是 float 的。如果它们是 float 的,则它们不能内联。
如果您删除 float (随后删除父级上的 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>
关于css - 为什么内联 div 的行为与 span 不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13812166/