Question

我一直在试验＆＃34;显示：inline-block＆＃34;作为＆＃34; display：float＆＃34;的替代品。我发现的所有文档都说可以正常应用于块元素的属性可以应用于＆＃34;内联块＆＃34;元件。特别是＃34;身高＆＃34;，＆＃34;宽度＆＃34;，＆＃34;保证金＆＃34;和＆＃34;填充＆＃34;总是列出。

设置高度和宽度当然对我有用 - 我也假设其他所有人，因为我在网上找到的每个例子都解释了＆＃34; inline-block＆＃34;设置一个或两个。

但是在IE9或Firefox 32中设置边距或填充似乎完全没有效果。并且没有例子我设法找到任何一个。

我真的更喜欢使用边距和填充，因为内容可以有不同的宽度。在某个我忽略的地方有一个例子吗？

这是我最近一直在玩的内容的摘录：

.lnk2 a {
display: inline-block;
margin: 2px 1em;
padding: 2px 2em;
}

<div class="lnk2">
 <a href="rates/minneapolis-55401.htm">55401</a>
 <a href="rates/minneapolis-55402.htm">55402</a>
 <a href="rates/minneapolis-55403.htm">55403</a>
</div>

用于＆＃34; margin＆＃34;的值是什么并不重要。或＆＃34;填充＆＃34;是。实际显示在任一浏览器中都不会改变。

另外，最初的＆＃34; div＆＃34;在HTLM中是＆＃34; ol＆＃34;每个＆＃34; a＆＃34;被包裹在＆＃34; li＆＃34;对。同样的结果 - 上面的HTML只是试图简化一些事情，看看是否更接近问题。

Answer 1

您还可以使用浮动元素删除不需要的空格

.lnk2 a {
display:block;
float:left;
margin: 2px 1em;
padding: 2px 2em;
}

CSS内联块不尊重边距或填充

1 个答案: