html - 如何防止悬停期间的链接填充扩展段落填充

Question

我正在尝试列出一些链接(没有元素符号或数字)，并且我有一个 a:hover 类，它添加了一些填充和背景颜色。代码看起来像这样

<p>
<a href="google.ca">Google</a></br>
<a href="bing.ca">Garbage Google</a>
</p>

CSS 看起来像这样

.p{
padding: 20px;
background-color: #ffffff;
display: inline-block;
}

a:hover{
padding: 0px 5px 0px 5px;
background-color: #ff0000;
}

我看到 display: inline-block; 会确保段落上的填充不会延伸到整个页面(我不想要)，但我不完全理解如何有用。每当我将鼠标悬停在列表中最大的元素(在本例中为“垃圾谷歌”)上时，段落上的填充会扩展以容纳列表项上的新填充，即使它有足够的空间。有什么建议吗？

Answer 1

block 级元素(如 p)在默认情况下是其父元素宽度的 100%，因此它们往往像 Spring 一样(总是希望尽可能地展开)。

内联元素(如 a)在默认情况下仅与其内容一样宽，因此它们就像橡皮筋一样(总是希望在不压碎其内容的情况下缩小到尽可能小的尺寸) .

当您的 a:hover 类变为事件状态时，您正在增加内联 a 元素的大小，这会导致其大小增加，进而导致p，其中也包含增加的 a。

您可以为您的 p 元素设置一个宽度，该宽度大于任何 a 元素悬停时的最大宽度。由于您已将 p 设置为 inline-block，它的宽度就像 inline (橡皮筋)一样，但您需要橡皮筋在比内容更大的点保持打开状态，因此它不会受到内容增长和收缩的影响。

这样做会导致 p 的大小保持不变，因为内部的 a 元素会因悬停而变大和变小。