CSS3 中 ul li:hover 上的背景颜色填充错误？答案

【问题标题】：Wrong padding for background color on ul li:hover in CSS3?CSS3 中 ul li:hover 上的背景颜色填充错误？
【发布时间】：2012-07-06 17:55:45
【问题描述】：

我尝试使用 CSS 设计一个带有 HTML 表格的水平菜单栏。但是 padding 并没有像我认为的那样工作：当我试图改变整个 li 的背景颜色时，当用户用鼠标“悬停”它时。但是填充似乎出错了。

这是我的 CSS 代码（使用 Sassy 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;
        }
    }           
}

但结果如下所示：

如您所见，更改的背景颜色（在本例中为 $deco-dark）不会影响整个 li 区域（具有渐变的区域），正如我所期望的那样。我可以做些什么来改变这种行为？

【问题讨论】：

您使用的是表格还是 UL？您的 css 表示 UL，但您的问题描述为 table。

标签： html css sass menubar

【解决方案1】：

使用 SASS，如下：

li {
  :hover { } }

将样式应用于任何:hover 元素内部 li。你需要的是

li {
  &:hover {} }

当li 元素悬停时，它会将样式应用到它本身。目前，该样式可能仅应用于li 中的a。

【讨论】：

谢谢，这为我指明了正确的方向并解决了我不明白的要点。我真的不知道'&'运算符的那些东西......但现在我想通了！又是坦克！ :)

【解决方案2】：

尝试将您的 li 改为 display: inline-block;。

【讨论】：

我做了，但还是有同样的问题。
嗯，看起来您的填充没有被应用，因为它不是块元素。尝试 display:block 和 float:left 为 li 的。并添加溢出：自动；到 #nav 菜单。如果正在应用它，那么只需将顶部和底部填充从 2px 增加到它需要的任何值。
太复杂了。见上文。

【解决方案3】：

您也可以在 li 中放置锚点，然后相应地设置锚点的样式。这是我通常做的。另外，就像 Brant 所说，您使用的是列表还是表格？一个列表可能会更好，并且是您已经实现的，所以只需使用它。

【讨论】：