CSS list-style-type Property

例

設置不同的列表樣式：

ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;}

試一試»

更多"Try it Yourself"下面的例子。

定義和用法

列表樣式類型指定列表項標記的列表中的類型。

默認值：	disc
遺傳：	yes
動畫：	no. Read about animatable
版：	CSS1
JavaScript語法：	object .style.listStyleType="square" Try it

瀏覽器支持

在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。

屬性
list-style-type	1.0	4	1.0	1.0	3.5

Note: Internet Explorer和Opera 12和早期版本不支持的值：CJK表意文字，希伯來文，平假名，片假名，伊呂波，片假名和片假名，伊呂波。

Note: IE8，和更早版本，只支持屬性值：小數領先的零，低希臘，低拉丁，上拉丁，亞美尼亞，格魯吉亞，如果指定一個DOCTYPE是繼承！

CSS語法

list-style-type:value;

屬性值

值	描述	播放
disc	默認值。標記是一個實心圓	播放 ”
armenian	標記是傳統的亞美尼亞編號	播放 ”
circle	標記是一個圓	播放 ”
cjk-ideographic	標記是純數字的表意	播放 ”
decimal	該標記是一個數字	播放 ”
decimal-leading-zero	標記為帶前導零（01，02，03等）數量	播放 ”
georgian	標記是傳統格魯吉亞編號	播放 ”
hebrew	標記是傳統的希伯來編號	播放 ”
hiragana	標記是傳統的平假名編號	播放 ”
hiragana-iroha	標記是傳統的平假名伊呂波編號	播放 ”
katakana	標記是傳統的片假名編號	播放 ”
katakana-iroha	標記是傳統的片假名伊呂波編號	播放 ”
lower-alpha	標記是低級-α (a, b, c, d, e, etc.)	播放 ”
lower-greek	標記是低希臘語	播放 ”
lower-latin	標記是拉丁低(a, b, c, d, e, etc.)	播放 ”
lower-roman	標記是低級-羅馬(i, ii, iii, iv, v, etc.)	播放 ”
none	無標記顯示	播放 ”
square	該標記是正方形	播放 ”
upper-alpha	標記是大寫字母(A, B, C, D, E, etc.)	播放 ”
upper-latin	標記是大寫拉丁字母(A, B, C, D, E, etc.)	播放 ”
upper-roman	標記是上層羅馬(I, II, III, IV, V, etc.)	播放 ”
initial	將此屬性設置為默認值。閱讀關於初始	播放 ”
inherit	繼承其父元素此屬性。閱讀關於繼承

更多示例

例

這個例子演示了所有不同的列表項標記：

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}

ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}

試一試»

例

如何添加項目符號的顏色<ul>或<ol>通過刪除其默認子彈和補充，看起來像子彈HTML實體(•) ：

ul {
    list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 0;
}

li {
    padding-left: 16px;
}

li:before {
    content: "•"; /* Insert content that looks like bullets */
    padding-right: 8px;
    color: blue; /* Or a color you prefer */
}

試一試»

CSS 參考

CSS 屬性

CSS list-style-type Property

例

定義和用法

瀏覽器支持

CSS語法

屬性值

更多示例

例

例

相關頁面