CSS：如何使文本周围的背景颜色不与文本齐平？答案

【问题标题】：CSS: How to make background color around text not flush to the text?CSS：如何使文本周围的背景颜色不与文本齐平？
【发布时间】：2013-08-02 03:23:51
【问题描述】：

我是 CSS 和网站设计的新手。请参阅本页左侧的菜单：当您将鼠标悬停在菜单元素上时，文本周围的背景变为白色，但我希望整行以及文本上方和下方的一点点也变为白色，类似于顶部菜单。这是我的代码：

.child-sidebar-menu
{
    background-color: #DEDEDE;
}

.advanced-sidebar-menu ul li a{

text-decoration: none;
color: black;
border-bottom: 0px;
}

.advanced-sidebar-menu ul li a:hover{
text-decoration: none;
border-bottom: 0px;
}

.advanced-sidebar-menu li > ul li a:hover
 {
   color: black;
background-color: white;
 }

.advanced-sidebar-menu ul ul li a{
font-weight: normal;
font-size: 100%;
border-bottom: 0px;
}

.advanced-sidebar-menu ul{
margin: 0 0 0 0px;
list-style: none;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
border-bottom: 0px;
line-height: 200%;
}

.advanced-sidebar-menu ul li{
    list-style:none;
    list-style-type: none;
border-bottom: 0px;


}

.advanced-sidebar-menu li.current_page_item{

    list-style-type: none;
border-bottom: 0px;
}

.advanced-sidebar-menu li.current_page_item a{
    font-weight: bold;
border-bottom: 0px;
}

有什么简单的方法吗？是不是跟border和margin有关系？

谢谢。

【问题讨论】：

标签： css menu background hover

【解决方案1】：

检查这个 JSFiddle：http://jsfiddle.net/D5sdT/

重点是：

制作<a>标签display : block。这将允许<a> 以li 占据整个水平空间
从<li> 中删除padding 和margin。而是给<a>。

【讨论】：

谢谢。我确实像你一样，它改进了很多，但是在悬停背景颜色和常规背景颜色之间仍然存在一些差距。右边没有空隙。
这是因为另一个ul 标记内的ul 标记。默认情况下，ul 将在左侧有一些边距。我们可以做的是，我们为ul 标签设置左边0 的边距。并在嵌套的ul 内为a 标签添加一些左填充。这将显示缩进的子菜单，并使背景颜色占据整个宽度。需要演示吗？告诉我。
jsfiddle.net/D5sdT/1 我更新了代码以演示具有适当悬停背景的子菜单。检查并告诉我是否需要任何修改。
嘿。谢谢你的帮助。我在此页面上实现了您的最后一个 jsfiddle：goo.gl/X0VRgu 但问题仍然存在。
我根据您的代码复制了我在 jsfiddle 上实现的代码，它可以正常工作http://jsfiddle.net/kaY5n/。任何想法为什么左边的空白在 wordpress 上实现时仍然存在？

【解决方案2】：

我尝试播放您的网站并想出了这个我希望这是您想要的。改变你的

.advanced-sidebar-menu li > ul li a:hover
 {
   color: black;
background-color: white;
 }

到

.advanced-sidebar-menu li > ul li:hover
 {
   color: black;
background-color: white;
 }

【讨论】：