html - 改变 li 缩进的颜色？

Question

我有一堆 lis。每隔一个 li 都有一个“alt”类。我的 CSS 看起来像这样。

li.tab{
    list-style: none;
    background-color:#FFFFFF;
    padding-left: 18px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-left: 0px;
}
li.tab.alt,li.tab:before{
    background-color:#e8e8e8
}

但是，最终看起来像这样。

我想填充图标左侧的空白区域。这可以用普通 CSS 实现还是必须使用 span 作为缩进？谢谢!

Answer 1

不确定这是否是您要找的东西，但像这样的东西应该有用:

http://jsfiddle.net/a3Lg2nh7/1/

给出<ul>背景颜色并用填充替换边距

ul {
    padding-left:50px;
    margin-left:0px;
    background:#e8e8e8;
}
li.tab{
    list-style: none;
    background-color:white;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-left: 0px;
    display:block;
    position:relative;
    padding-left:10px
}
li.tab:nth-child(odd) {
    background:#e8e8e8;
}

或者，如果您希望每一行的颜色都相同，则只需将 li 中的边距替换为填充即可。并从 ul 中删除所有边距/填充

http://jsfiddle.net/a3Lg2nh7/3/

ul {
    padding-left:0px;
    margin-left:0px;
}
li.tab{
    list-style: none;
    background-color:white;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-left: 0px;
    display:block;
    position:relative;
    padding-left:60px
}
li.tab:nth-child(odd) {
    background:#e8e8e8;
}

您也可以使用 nth-child选择器而不是添加 alt类