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

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; 
}