html - 悬停为整个li提供背景色

我试图给一个li一个background-color，我尝试的所有操作都没有给整个li颜色，而只是从文本开始处给出了颜色。

我如何使其对整个background-color赋予li

JSFiddle

http://jsfiddle.net/r2wL2pqj/

码

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

这也是这样做的正确方法吗，我在正确的轨道上吗？

最佳答案

删除边距，改用padding：

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