html - 具有相同长度背景颜色的不同长度行

Question

我真的无法解决问题。我在列表中有一些带有不同选项的行，并且我希望在光标悬停时在它们上面显示背景色。但我希望它在每一行中的长度都相同，因此背景颜色在水平方向上的开始和结束距离相同。可悲的是，现在它只持续到文本的末尾。

这是 demo

CSS

#leftcol1 ul li{
left: 0px;
top: 30px;
position: relative;
margin: 0px auto;
list-style-type: none;
text-decoration:none;
color:black;
list-style-type:none;
font-family:Arial;
line-height: 20px;
display:block;
white-space:nowrap; }

#leftcol1 ul li a{
list-style-type:none;
color:black;
text-decoration:none; }

#leftcol1Wrapper a:hover{
background-color:darkgray;
width: 200px;
min-width: 200px;
max-width:200px; }

HTML

        <div id="leftcol1">
        <ul  id="leftcol1Wrapper">
            <li><a href="#" id="person"> </a></li>
            <li><a href="#"> Üzenetek </a></li>
            <li><a href="#"> Értékeléseim</a></li>
            <li><a href="#"> Kérdéseim</a></li>
            <li><a href="#"> Exklúzív értékelések</a></li>
            <li><a href="#"> Válaszok</a></li>
            <li><a href="#"> Értesítések</a></li>
        </ul>
    </div>

谢谢。

Answer 1

添加display:block给你的#leftcol1 ul li a这是一个内联元素。

#leftcol1 ul li {
    left: 0px;
    top: 30px;
    position: relative;
    margin: 0px auto;
    list-style-type: none;
    text-decoration:none;
    color:black;
    list-style-type:none;
    font-family:Arial;
    line-height: 20px;
    display:block;
    white-space:nowrap;
}
#leftcol1 ul li a {
    display: block;<!--Added-->
    list-style-type:none;
    color:black;
    text-decoration:none;
}
#leftcol1Wrapper a:hover {
    background-color:darkgray;
    width: 200px;
    min-width: 200px;
    max-width:200px;
}

DEMO

注:display:block至 <a>将有助于继承width其 parent 的。