parent-element不会使用样式链接进行缩放

Question

Example @JsFiddle

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

实际效果并不差，但不是我想要的。解释为什么会发生这种情况会有所帮助。提前致谢！ ：）

PS：我使用的是Mozilla Firefox 15.0.1

---

Answer 1

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

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

a { display: inline-block; }

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