改变李的缩进颜色？

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一堆李。其他李有一个'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或必须使用跨度作为缩进？谢谢！

回答：

不知道这是你在找什么，但这样的事情应该工作：

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

或者如果你想要每行的颜色相同来扩展整个方法，只需用中的填充替换页边距并从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类

回答：

，你应该寻找的是这样的：

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

希望这有助于你

以上是 改变李的缩进颜色？ 的全部内容， 来源链接： utcz.com/qa/257497.html

回到顶部