html - 父元素不随样式链接缩放

Question

Example @JsFiddle

为什么包裹蓝色框的灰色框不随它们缩放？我为元素尝试了许多不同的属性组合，但我无法使其正常工作。

效果其实还不错，但不是我想要的。解释为什么会发生这种情况会有所帮助。提前致谢! :)

PS:我使用的是 Mozilla Firefox 15.0.1

---

Answer 1

您的 a 元素将其显示属性设置为 inline。这实质上意味着它们被视为文本，因此应用于它们的任何“ block ”类型属性都不会像您期望的那样工作，就像您所说的 div 一样。

了解 display 属性是 CSS 的重要组成部分，但对于这个示例，您希望链接是内联的，但也是一个 block ，因此您可以使用:

a { display: inline-block; }

现在外部 div 将考虑 inline-block 元素的大小，而之前它不会，因为它将您的链接视为文本。