使用·代替子彈<ul>

Question

我在CSS中找到了關於list-style-type屬性的文章，但它沒有列出＆middot; （·）作為選項，而不是默認disc或＆bullet; （•）。 有沒有辦法用HTML或CSS做到這一點？

Answer 1

CSS（適用於任何支持:before和content: :)的瀏覽器：

li:before { 
    content: '\b7\a0'; /* \b7 is a middot, \a0 is a space */
}
li {
    list-style:none;
    text-indent:-.5em; /* helps make it look more like it's a bullet. */
}

警告：這不是真正的列表樣式。 因此，當你有包裝列表時，它看起來很有趣。 這可能可以通過幾個單位的負文本縮進來減輕，以使其更像列表樣式。

---

另一個實現：

li:before {
    content: '\b7\a0';
    position:absolute;
    right:100%
}
li {
    list-style:none;
    position:relative;
}

這個版本似乎更好。 我經常使用:before和:after添加額外的東西，比如邊框，但如果你要添加一個子彈，我想是不是這樣的。 雖然這是備用建議，但它可能是首選建議。

Answer 2

是! 您可以使用before偽類在每個項目之前插入字符。

.DotList li:before
{
    content: "·";
}

這是jsFiddle的一個例子。

Answer 3

list-style-type不選擇要使用的字符，它選擇要使用的抽象標記。 注意標准狀態：

值“none”不指定標記，否則標記有三種類型：字形，編號系統和字母系統。

字形用圓盤，圓形和方形指定。 它們的精確渲染取決於用戶代理。

要更好地控制標記，您必須使用list-style-image設置list-style-image或使用:before偽元素和content屬性，將list-style-type為'none'。 :before和IE 7及更早版本中不支持content屬性 ，因此您必須使用list-style-image來支持IE 7，或者只是讓IE 7使用不同的標記。 您可以使用條件注釋來定位IE 7及更早版本。

Answer 4

您可以在LI中使用背景圖像

一個可能的例子
http://css.maxdesign.com.au/listamatic/vertical05.htm

Answer 5

list-style-type的可用選項數量有限，這些選項在CSS2規范中定義。

您可以使用：

• 圓盤
• 圈
• 廣場
• 十進制
• 小數領先的零
• 低羅馬
• 上羅馬
• 降低希臘
• 較低的拉丁
• 上拉丁
• 亞美尼亞
• 格魯吉亞
• 下-α
• 上-α
• 沒有

如果您想要自定義內容，請使用list-style-image屬性

如果您為支持生成內容的瀏覽器設計樣式，則可以使用：

li:before {
  content: '\[utf-8 hex code for character]';
  position: absolute;
  right: 100%;
}

li {
  position: relative;
}

Answer 6

而不是li:before ，它影響了頁面上的所有li（在菜單，標簽，手風琴中），我使用了這個：

 ul { list-style: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAMAAAAYuxziAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF////cmpmZmZm+MGYqNP/Zmt/06N6j7j/ImXnGgAAABpJREFUeNpiYAABZkZWFgY2JiZ2CAsVAAQYAAPiACwnaqqBAAAAAElFTkSuQmCC'); } 

 <ul> <li>This is my middot</li> </ul>