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

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