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。

Answer 2

我这样做的方法是将:hover样式添加到<li>并在<ul>上设置宽度。

我已使用示例更新了您的jsFiddle：http://jsfiddle.net/nmvwu4v7/3/

这是更新的CSS：

#leftcol1 ul li {
    left: 0px;
    top: 30px;
    position: relative;
    /* removed margin: 0 auto; so it would not center with the width provided below */
    list-style-type: none;
    text-decoration:none;
    color:black;
    list-style-type:none;
    font-family:Arial;
    line-height: 20px;
    display:block;
    white-space:nowrap;
    width: 200px; /* new */
}
#leftcol1 ul li a{
    list-style-type:none;
    color:black;
    text-decoration:none;
}
#leftcol1Wrapper li:hover { /* was #leftcol1Wrapper a:hover */
    background-color:darkgray;
}

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

2 个答案: