ul li上的背景顏色填充錯誤：懸停在CSS3中？

我嘗試使用CSS來設計一個帶有HTML表格的水平菜單欄。但填充不按我認爲應該的方式工作：當我試圖改變整個li的背景顏色，當用戶「用鼠標拖動它」時。但填充似乎錯了。ul li上的背景顏色填充錯誤：懸停在CSS3中？

這裏是我的CSS代碼（使用野蠻女友CSS）：

/* just to be sure the default of browser doesn't change look */ 
* { 
    margin:0; 
    padding:0; 
} 

/* some other design code ... */ 

#nav-menu { 
    padding:5px; 
    text-align:center; 

    /* change background: browser specific gradient */ 
    background:$menu-bgcolor; 

    li { 
     list-style:none; 
     display:inline; 
     padding:2px 10px 2px 10px; 

     :hover { 
      background-color:$deco-dark; 
      color:$deco-verylight; 
     } 
    }   
}

但是結果看起來像下面這樣：

A menu item on hover status -- you can see that padding doesn't cover all li area.

正如你所看到的改變背景顏色，這在這種情況下爲$deco-dark，並不影響整個li區域（具有梯度的區域），如我所料。我能做些什麼來改變這種行爲？

來源

2012-07-06 CGee

您是使用表格還是UL？你的CSS表示UL，但是你的問題描述是表格。 – Brant 2012-07-06 18:01:08

隨着SASS，以下內容：

li { 
    :hover { } }

將樣式應用於任何:hover元素內的li。你需要的是

li { 
    &:hover {} }

將樣式應用到li元素本身，當它盤旋。現在，這種風格可能僅適用於li內部的a。

來源

2012-07-06 18:44:20 Emily

謝謝，這指出我正確的方向，並解決了主要問題，我不明白。我真的不知道用'＆'操作符的東西......但現在我明白了！坦克再次！ :) – CGee 2012-07-06 20:51:50

嘗試將您的li改爲display: inline-block;。

來源

2012-07-06 18:06:03 zen

我做過了，但仍然有同樣的問題。 – CGee 2012-07-06 18:10:02

嗯，它看起來像你的填充沒有被應用，因爲它不是一個塊元素。嘗試顯示：塊和浮動：左爲李的。並添加溢出：auto;到＃nav-menu。如果正在應用，那麼只需將頂部和底部填充從2px增加到任何需要的填充。 – zen 2012-07-06 18:12:31

太複雜了。往上看。 – CGee 2012-07-06 20:50:50

您也可以在錨中放置錨，然後相應地設計錨。這是我通常做的。另外，就像Brant說的，你在使用列表還是表格？列表可能會更好，並且是您已經實現的，所以只是使用它。

來源

2012-07-06 18:40:34

ul li上的背景顏色填充錯誤：懸停在CSS3中？

回答

相關問題