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

Question

示例@JsFiddle

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

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

PS：我在 Mozilla Firefox 15.0.1

---

Answer 1

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

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

a { display: inline-block; }

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