列表樣式類型CSS屬性的文本值，如何？

我想定製呈現無序列表的方式。列表樣式類型CSS屬性的文本值，如何？

我知道我可以使用list-style-typenone，disc，circle，square等或多或少的支持值之間變化。我也知道可以將指定圖像的列表標記的默認外觀更改爲list-style-image屬性。

的問題是，我想與large right arrow（►，►）HTML特殊字符，而不是使用list-style-image組合和三角圖像更換子彈。

可能嗎？順便說一句，如果這件事情jQuery已經加載在頁面上，所以它不會是一個問題，如果這可以幫助使用它。

謝謝。

- 編輯 -

謝謝，我會使用一個版本或其他取決於哪種瀏覽器則需要支持。順便說一句，兩個答案都很好，不得不判斷哪一個是「贏家」並不容易，所以我選擇了首先給出的答案。

來源

2011-04-11 Paolo

據我所知，這是不可能的，使用list-style-type物業辦。

但是，如果您的瀏覽器支持:before CSS選擇器，則可以使用它將項目符號實體插入列表項目之前。你只需要實體代碼轉換爲十六進制：

ul { 
    list-style-type: none; 
} 

li:before { 
    content: "\25ba\00a0"; 
}

你可以找到的jsfiddle展示這種here。

來源

2011-04-11 09:18:00

我正在處理類似的事情我自己。我不打擾現在發佈答案，這是我得到的地方：http://jsfiddle.net/thirtydot/ZTKuS/ – thirtydot 2011-04-11 09:23:19

+1擊敗了我，它可以找到這些實體的方便轉換計算器[這裏] （http://www.evotech.net/articles/testjsentities.html） – clairesuzy 2011-04-11 09:25:01

+1這不適用於[IE6和7]（http://www.quirksmode.org/css/contents.html），但如果這不是必要的，這是一個非常好的解決方法。 – 2011-04-11 09:32:08

@Frederic展示了一個有趣的解決方法，除非您必須支持IE6和7，否則您必須使用包含該字符的常規HTML元素來解決此問題，並且您的樣式把它放在正確的地方。

喜歡的東西

ul { list-style-type: none } /* Adjust margin and padding as you see fit */ 
ul li div.bullet { float: left; width: 30px; margin-right: 12px } 

<li> 
<div class="bullet">&#9658;</div> 
List item 1 
</li>

來源

2011-04-11 09:11:46

如果使用:before方法讓你列表樣式考慮增加填充到列表中，陰性切緣到列表元素來獲得在斷行相同的空間：

ul { 
    list-style: none; 
    padding: 0 0 0 24px 
} 
ul > li:before { 
    content: '\25BA'; 
    float: left; 
    margin-left: -24px 
}

只是使用示例postet從十三月嘗試在jsfiddle

來源

2014-05-12 20:16:09

列表樣式類型CSS屬性的文本值，如何？

回答

相關問題