为什么要使用display:inline-block?

时间:2011-03-03 18:15:05

标签: html css

display:inline-block属性似乎是执行display:block + float:left/right的有用替代方法,但它引入的奇怪的间距/空白行为似乎否定了这种便利。(请参阅{ {3}}和here)最重要的是,浏览器支持很多,需要修复,但这显然会发生变化。

根据here雅虎用户界面大量使用它,但为什么呢?使用内联块是否有令人信服的理由?

3 个答案:

答案 0 :(得分:6)

一个有用的情况是,您希望拥有可变高度的项目行。如果你要使用浮点数,那么你还必须想出一些方法来清除第一行中的所有第二行。 Here's an example of that ugly behavior.

但是,使用内联块的魔力here's a version that works。只有两个额外的CSS规则,它甚至适用于IE6和7!

答案 1 :(得分:4)

我通常使用内联块来表示我希望能够给出高度和宽度的内联元素。这在使用精灵时非常有用(特别是使用滑动门方法的圆角按钮)。我不会将它用于一切,但我更有可能在需要时使用浮点数而不是将块级元素分解为使用内联块。

答案 2 :(得分:3)

因为浮点数在IE中引入了水平浮点数问题,需要指定明确的宽度以保持在同一水平线上。使用内联块(带有修复),您可以避免为浮动项目指定显式宽度,但保持所需的块状内联行为。

您之后也不必清除这些项目,但我想这可以补偿您需要执行的内联块修复。