當字體重量發生變化時保留原始填充

我創建了兩個div，每個填充都有一些填充。當字體重量發生變化時保留原始填充

div { 
 
    display:inline; 
 
    background-color:yellow; 
 
    padding: 2px 2px 2px 2px; 
 
} 
 

 
div:hover { 
 
    font-weight:bold; 
 
}

<body style="font:15px arial,sans-serif;"> 
 
    <div>one</div> 
 
    <div>two</div> 
 
</body>

如在CSS上方觀察，我提出的字體粗細加粗當鼠標懸停在div的。

現在發生的情況是，如果我將鼠標懸停在第一個div上，則第二個div將向右移動一點，因爲用粗體字體容納文本需要額外的水平空間。

有什麼辦法可以防止div轉移嗎？即使字體重量正常（即當div沒有被徘徊時），我是否可以考慮額外的空間？

預先感謝您！

來源

2013-07-07 user2293035

divs會移動，因爲它們是爲了適應文字，所以如果文字變大，div也會變大。你最好的選擇是在div上設置一個固定的寬度，因此它不會移動。

來源

2013-07-07 05:18:59

要麼將寬度設置爲固定的寬度，要麼將懸停部分的寬度設置爲減少填充。

來源

2013-07-07 05:49:50 Srivathsan

'SANS-serif'是用戶控制的字體家庭，所以我們止跌」噸知道多少填充刪除。 –

代替display : inline;使用float:left;和提供的width特定量的div小號

div { 
 
    background-color: #FFFF00; \t \t \t 
 
    float: left; 
 
    padding: 2px; 
 
    width: 41px; 
 
} 
 

 
div:hover { 
 
    font-weight:bold; 
 
}

<div>one</div> 
 
<div>two</div>

來源

2015-06-23 08:01:15 captainsac

當字體重量發生變化時保留原始填充

回答

相關問題