我正在尝试列出一些链接（没有项目符号或数字），我有一个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;会确保段落上的填充不会延伸到整个页面（我不想要）但我不完全理解它是如何工作的。每当我将鼠标悬停在列表中的最大项目上时（＆＃34; Garbage Google＆＃34;在这种情况下），段落上的填充会延伸以适应列表项目上的新填充，即使它有足够的空间可供使用。有什么建议吗？
答案 0 :(得分：1)
块级元素（如p）默认情况下是其父元素宽度的100％，因此它们往往像弹簧一样（总是希望尽可能地扩展）。
默认情况下，内联元素（如a）的宽度与内容一样宽，因此它们就像橡皮筋一样（总是希望缩小到可能的最小尺寸而不会破坏其内容）。
当您的a:hover类变为活动状态时，您正在增加内联a元素的大小，这会导致其大小增加，从而导致p，其中包含a也要增加。
您可以做的是为p元素设置一个宽度，该宽度大于a元素悬停在其上时的最大宽度。由于您已将p设置为inline-block，因此其宽度类似于inline（橡皮筋），但您需要将该橡皮筋保持打开状态这比内容更大，所以它不会受到内容增长和缩小的影响。
执行此操作会导致p的大小保持不变，因为内部的a元素由于悬停而增长和缩小。