Question

我试图给li一个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;
}

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

Answer 1

删除边距，改为使用填充：

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

Answer 2

我得到一个完整的背景，你的余量之间的差距，如果你想要改变管道之间的整个差距，尝试将你的边距改为填充。

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

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

悬停给整个背景颜色

2 个答案: