內聯列表項更改li時的位置：活動

Question

我有一個水平導航欄，當其中一個鏈接被選中時，鏈接變爲粗體。然而，當我點擊一個，它右邊的項目移動位置，因爲字體變大，從而使列表項的寬度變大。無論如何要避免這種情況？我希望文本留在同一個地方。謝謝。

Answer 1

兩個可能的解決方案：

設置在a元素的寬度，使他們inline-block的。

​a { 
    width: 100px; 
    display: inline-block; 
} 

您只需確保寬度足夠寬，以允許粗體文本顯示而不會破壞兩行。

第二個選項：使用文字陰影使其看起來加粗。

a.bolded { 
    text-shadow:0px 0px 1px black; 
} 

這裏是一個demo顯示兩個。我有第二個懸停，但你可以添加或刪除類使用jQuery的.toggleClass()

Answer 2

有兩個重要的事件，你應該針對，當寫案例的CSS鏈接。 一個是:hover，另一個是:active。

它們被稱爲「僞類」，它們讓您可以選擇在鼠標懸停（：懸停）和單擊它時（：主動）設置元素的樣式。

如果您將設置爲與活動相同的標記樣式並懸停（通常只需要懸停），那麼您應該得到相同的結果並且字體大小將保持不變。 這裏和示例：

a, a:hover, a:active { font: normal 13px Arial; text-decoration: none; } 

在一個CSS線，你可以設置所有的樣式是相同的。

重要注意事項：你可以使用jquery，但不需要它（只是看到你在jsfiddle上使用它）。