这个填充问题的css解决方案是什么？

Question

<div id="action-nav">
    <ul>
        <li><a href="#" class="selected">selected</a></li>
        <li><a href="#">selected</a></li>
    </ul>
</div>

和样式：

#action-nav
{
    text-align:center;


}

#action-nav ul li
{

    height: 48px;
    width: 112px;
    list-style:none;
    float: left;
    margin-right:20px;

}

#action-nav ul li a
{
   text-decoration:none;
   padding-top :15px;
   height: 48px;
   width: 112px;
   display: block;
}

#action-nav ul li:hover a
{
     color:#fff;

}

#action-nav ul li:hover, #action-nav ul li a.selected
{

    background-image: url('../Images/link_red_bg.jpg');
    color:#fff;


}

a.selected类是问题。它应该看起来像在相邻的li：hover样式中。我错过了什么？

Answer 1

您需要从高处减去填充。

Answer 2

可能会重复，在这种情况下，

background-repeat: no-repeat;

Answer 3

使用line-height而不是height

Answer 4

尝试将“已选择”类移至父级＆lt; li＆gt;。

此外，指定孩子的确切宽度和高度＆lt; a＆gt;是多余的;只需将两个值更改为100％，即可自动匹配父级＆lt; li＆gt;。

的尺寸