CSS - 文字移動時懸停

Question

我已經在這裏約一個小時了，似乎不能抓住它。
每次我將鼠標懸停在這個文本上（我想爲它懸停一個背景顏色），文本隨着bgcolor一起移動。 這裏是我的了：

 #innerheader ul { 
      list-style:none; 
      margin:0; 
      padding:0; 
     } 
     #innerheader li { 
      display:block; 
      float:left; 
      height:25px; 
      margin:0 2px; 
      padding:15px 10px 0 10px; 
      color:#FFFFFF; 
      font-weight:bold; 
      font-size:10px; 
      text-transform:uppercase; 
     } 

     #innerheader li a, 
     #innerheader li a:link, 
     #innerheader li a:visited, 
     #innerheader li a:active { 
      color:#FFFFFF; 
      text-decoration:none; 
     } 
     #innerheader li a:hover { 
      background-color: blue; 
      padding: 10px 10px 10px 10px 
     } 

Answer 1

在懸停聲明中取出填充。或者直接在懸停狀態之前將填充移至錨點，如下面的代碼。

文本移動的原因是錨點上沒有填充，因此當您懸停時，會出現填充。

#innerheader li a, 
    #innerheader li a:link, 
    #innerheader li a:visited, 
    #innerheader li a:active { 
     color:#FFFFFF; 
     text-decoration:none; 
     padding: 10px; 
    } 
    #innerheader li a:hover { 
     background-color: blue; 
    } 

Answer 2

擺脫填充，這是什麼導致它移動。

Answer 3

它正在移動，因爲您正在更改懸停塊中的填充。刪除它，它應該沒問題。

Answer 4

你把填充放在li上：hover！當然，這將會改變文本。要解決這個問題，您需要定義寬度和高度，並通過懸停時的填充量減少它們。或者將填充移動到非懸停狀態。

Answer 5

這是因爲填充。刪除它，那麼它會工作得很好。