懸停給整個李的背景顏色

我試圖給li a background-color，我試過的一切它並沒有給整個li它只是從文本開始的地方給它的顏色。懸停給整個李的背景顏色

我如何給它一個background-color整個li

的jsfiddle

CODE

HTML

   <ul class="items-list"> 
        <li class="nickname-list"> 
         <span class="nickname">The Nickname</span> 
        </li> 
        <li class="home-list"> 
         <span class="home">Home</span> 
        </li> 
        <li class="search-list"> 
         <span class="search-friend">Search friends</span> 
        </li> 
       </ul>

風格

ul.items-list li:hover { 
    background-color: rgba(58, 87, 149, 0.66); 
    cursor: pointer; 

    border-radius: 5px; 
} 
.items{ 
    float:right; 
} 
ul.items-list { 
    display: -webkit-box; 
    list-style-type: none; 
} 
.items-list li { 
    margin-left: 10px; 
    text-align: center; 
} 
.items-list li:after { 
    color: #385490; 
    content: "|"; 
    margin-left: 10px; 
} 
.nickname, .home,.search-friend { 
    color: #000; 
    font-weight: bold; 
    font-size: 12px; 
    line-height: 10px; 
}

也是這樣做的正確方法，我在正確的軌道上嗎？

來源

2015-02-07 Inna

卸下餘量，使用填充代替：

.items-list li { 
    padding-left: 10px; 
}

來源

2015-02-07 15:50:32 Stickers

我得到一個完整的背景，兩者之間的差距就是您的保證金，如果您想要改變管道之間的整個差距，請嘗試將您的保證金更改爲填充。

.items-list li { 
    padding-left: 10px; 
    text-align: center; 
}

http://jsfiddle.net/r2wL2pqj/1/

來源

2015-02-07 15:49:22 Mayhem

懸停給整個李的背景顏色

回答

相關問題