編碼的世界 / 優質文選 / 生涯

有序列表ol顯示數字


2022年3月18日
-   

通過css的list-style-type 屬性 裏制定ol的顯示x效果,list-style-type 的值如下:
disc :  CSS1 默認值。實心圓
circle :  CSS1 空心圓
square :  CSS1 實心方塊
decimal :  CSS1 阿拉伯數字
lower-roman :  CSS1 小寫羅馬數字
upper-roman :  CSS1 大寫羅馬數字
lower-alpha :  CSS1 小寫英文字母
upper-alpha :  CSS1 大寫英文字母
非列表類型的標簽加上有序排列.下面這樣的代碼會給你一些參考
<div id="wrap">
<div class="list">WordPress</div>
<div class="list">is</div>
<div class="list">Wonderful</div>
<div class="list">and</div>
<div class="list">Perfect</div>
</div>

HTML說明.
class="list"的HTML標簽可以是絕大多數非列表類型標簽.
.list{display:list-item;list-style-type:disc;margin-left:20px;}
CSS說明,
display屬性, 將標簽的原有屬性轉換為"列表項目".
list-style-type屬性, 控制輸出的列表項目的標記. 如果是"disc", 則是實心圓點. 如果是"decimal", 則是阿拉伯數字.
margin-left屬性, 用來將原本突出(
被隱藏了的)在外面的列表標記顯示出來.
或者可以用list-style-position屬性, 來控制列表標記是顯示在內部還是顯示到外部

熱門文章