改變李的縮進顏色？

我有一堆李。其他李有一個'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 
}

但是，最終看起來像這樣。 Result

我想要在要填寫的圖標左側的空白空間。這可能與香草CSS或必須使用跨度作爲縮進？謝謝！

來源

2015-02-23 ollien

用背景色填充的？像http://jsfiddle.net/2zezyknm/？ 'ul'有自然填充，刪除它並在你的'li'中添加更多的填充並完成 – Huangism 2015-02-23 19:27:53

你是否嘗試去除'ul'的填充形式並將它添加到'li's？ – Marcelo 2015-02-23 19:30:29

不知道這是你在找什麼，但這樣的事情應該工作：

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類

來源

2015-02-23 19:37:00

關閉！但沒有雪茄。我不想要白色元素上的灰色背景。我只希望它具有灰色背景的元素。 – ollien 2015-02-23 22:52:24

第二個例子符合這個要求@ollien – 2015-02-23 22:53:13

哦，該死的我沒有看到。幹得不錯！ :) – ollien 2015-02-23 22:53:40

，你應該尋找的是這樣的：

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

希望這有助於你

來源

2015-02-23 19:30:17

不錯的解決方案，但我認爲這不是OP所期待的。 – 2015-02-23 19:33:07

這不是我想要的。我想設置縮進的顏色。 – ollien 2015-02-23 22:47:54

改變李的縮進顏色？

回答

相關問題