改变李的缩进颜色？

Question

我有一堆lis。其他每个人都有'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
}

然而，最终看起来像这样。

我想要填充图标左侧的空白区域。这可能是使用vanilla 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类

Answer 2

你应该寻找这样的东西：

HTML：

<ul>
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
</ul>

CSS：

ul {
    list-style: none;
    padding:0;
    margin:0;
}

li { 
    padding-left: 1em; 
    text-indent: -.7em;
}

li:before {
    content: "• ";
    color: red; /* or whatever color you prefer */
}

你可以在jsfiddle：http://jsfiddle.net/8nq2zg9a/

看到这个

这是这个问题的答案：How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

希望这有助于你