我以为我对CSS非常了解但这个简单的问题让我感到困惑.
<div> <span>示例文本</ span> </ div>
如果跨度有填充,则导致div的高度小于跨度的高度.
我意识到有一些方法可以使用"float"来正确地设置div大小,但浮动似乎总是会引入不希望的副作用.
是不是有一个干净简单的方法来告诉div大小以适应其内容？对我来说似乎很基础.也许我错过了什么.
tim*_*fin 13
在基本情况下,只需使用display: inline-block跨度.
这是我的测试用例(适用于FF,Chrome和IE 6-8):
<!DOCTYPE HTML>
<html>
<head>
<title>Span padding test</title>
</head>
<body>
<div style="background-color: yellow; border: 1px solid red;">
<span style="padding: 50px; display: inline-block;">test</span>
</div>
</body>
</html>
添加float: left到div和span 的原因是因为浮动内联元素会隐式地将其转换为块元素.如果你不熟悉的div和跨度之间的细微差别(又名块和内联元素之间的区别),阅读http://www.maxdesign.com.au/articles/inline/应该有所帮助.
还有其他一些方法可以解决这个问题,但如果不了解其余的标记和样式,很难说哪一个最好.
| 归档时间： |
|
| 查看次数： |
9033 次 |
| 最近记录： |