如何防止鏈接填充期間從延長段落填充

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;將確保在段落填充不會橫跨整個頁面（我沒」不想要），但我不完全理解它是如何工作的。每當我將鼠標懸停在列表中最大的項目（本例中爲「Garbage Google」）時，該段落的填充會擴展以適應列表項目上的新填充項，即使有足夠空間可供使用。有什麼建議麼？

Answer 1

塊級元素（如p）默認情況下爲其父元素的寬度的100％，因此它們傾向於像彈簧一樣行動（總是希望儘可能地擴展）。

內聯元素（如a）默認情況下只與其內容一樣寬，因此它們像橡皮筋一樣（總是希望縮小到儘可能最小的大小而不會壓縮其內容）。

當你的a:hover類變得活躍，你增加了內嵌a元素的大小，並導致其規模的增加，這又是導致p，其中包含一個到增加。

你可以做的是爲你的p元素設置一個寬度，該元素的寬度大於你的a元素在懸停時的最大寬度。由於您已將p設置爲inline-block，因此其寬度與inline（橡皮筋）類似，但您需要將該橡皮筋保持在比內容大的點處，受內容增長和收縮的影響。

這樣做會導致p的大小保持不變，因爲由於懸停，內部的a元素會增長和縮小。