CSS：悬停 <li> 时更改背景，颜色未填充 space

Question

我在让这个正在进行的代码播放器看起来正确时遇到了问题：

当我将鼠标悬停在列表项（列表项是顶部的四个选项卡）上时，背景会发生变化，但不会填充两侧的 space。我试图从另一个源代码中学习，但我无法完全正确地进行调整，并且仍然存在问题。

问题：当您将鼠标悬停在列表项上时，我怎样才能做到这一点，背景会发生变化并适合背景？

如果您访问我的站点 link，当您将鼠标悬停在这些元素之一上时，您就会明白我的意思。它只是改变了颜色，但并不像我预期的那样。

这是它背后的相关CSS，让我知道它是否可怕以及我可以做得更好，我还在学习中：

    #codetabs{
        width: 197px;
        height: 30px;
        position: relative;
        top: 8px;
        background-color: white;
        border: 2px solid #B7B7B7;
        border-radius: 10px;
        margin: 0px auto;
        padding: 0;
        }

    #codetabs ul{
        height: 50px;
        position: relative;
        margin: 0px auto;
        padding-left: 5px;
        }

    #codetabs li{
        text-align: center;
        float: left;
        height: 23px;
        list-style: none;
        margin: 0px;
        padding: 7px 5px 0px 5px;
        border-right: 2px solid #B7B7B7;
        }

    #codetabs li:hover{
        background-color: grey;
        }

如果有人认为我可能遗漏了任何重要的代码或信息，也请告诉我。我不认为 HTML 是必要的。

Answer 1

基本上你的问题是你的列表项都是包含在药丸形框 (id="codetabs") 中的矩形。如果您希望背景颜色填充每个按钮，您将需要使用一些伪类（:first-child 和 :last-child）来指定第一个和最后一个 li 项目的边框半径值。

Answer 2

这是工作 CSS:

#codetabs{
    width: 197px;
    height: 30px;
    position: relative;
    top: 8px;
    background-color: white;
    margin: 0 auto;
    padding: 0;
}

#codetabs ul{
    height: 50px;
    position: relative;
    margin: 0 auto;
    padding-left: 5px;
}

#codetabs li{
    text-align: center;
    float: left;
    height: 23px;
    list-style: none;
    margin: 0;
    padding: 7px 5px 0px 5px;
    border-width: 2px 2px 2px 0;
    border-color: #B7B7B7;
    border-style: solid;
}

#codetabs ul :first-child {
    border-radius: 10px 0 0 10px;
    border-left-width: 2px;
}
#codetabs ul :last-child {
    border-radius: 0 10px 10px 0;
}
#codetabs li:hover{
    background-color: grey;
}

http://jsfiddle.net/d09xgfzc/1/

CSS：悬停 <li> 时更改背景，颜色未填充 space

CSS: Change background on hover of <li>, color not filling the space

css

hover

html-lists