html - 悬停时列表背景在 CSS 中没有变化

Question

悬停在列表的第一个元素上会将整个背景更改为其他颜色。但是悬停其他元素，除了首先更改背景，但背景的某些部分保持不变，如您在图片中看到的那样。

HTML：

<div id="add_friend">
    <ul id="frnd_bar_2">
        <li>Add To Friends</li>
        <li>About</li>
        <li>Photos</li>
        <li>Friends</li>        
    </ul>
</div>

CSS：

#frnd_bar_2{
      position:relative;
      list-style: none;
      text-decoration: none;
      display: inline-block;
      border: 1px solid grey;
      border-left: 2px solid grey;
      margin: 0px;
      padding: 0px;
}
#frnd_bar_2 li{
     cursor:pointer;
     list-style: none;
     text-decoration: none;
     display: inline-block;
     border-right: 2px solid grey;
     text-align:center;
     margin: 0px auto;
     padding: 5px;
     padding-left: 30px;
     padding-right: 30px;
     font: 20px sans-serif ;
}
#frnd_bar_2 li:hover {
     background: #aaa;
     margin: 0px auto;
}
#add_friend{
    float:left;
    height:auto;
    background:#efefef;
    margin: 0px;
    padding: 0px;
}   

代码有问题吗？

Answer 1

我强调关键问题：

你应该习惯display: inline-block你的#frnd_bar_2 li不习惯#frnd_bar_2

查看此演示您可以根据需要更改的其他内容

好的，只需display: table-cell;在您的#frnd_bar_2 li 中使用并从#frnd_bar_2 演示中删除显示已更新

Answer 2

这似乎是因为 HTML 代码中的空格。添加或font-size: 0将#frnd_bar_2所有li放入一行。