有序序列ol li 詳解(ol li 標號未顯示?)
ol定義和用法
<ol> 標簽定義了一個有序列表. 列表排序以數字來顯示。使用<li> 標簽來定義列表選項。
基本語法如下:
<ol> <li>菠蘿</li> <li>西瓜</li> <li>火龍果</li> </ol>
運行結果:
ol屬性
屬性 | 值 | 描述 |
---|---|---|
compact | compact | HTML5中不支持,不贊成使用。請使用樣式取代它。 規定列表呈現的效果比正常情況更小巧。 |
reversed(h5新元素) |
reversed | 指定列表倒序(9,8,7...) |
start | number | HTML5不支持,不贊成使用。請使用樣式取代它。 規定列表中的起始點。 |
type | 1 A a I i |
規定列表的類型。不贊成使用。請使用樣式代替。 |
屬性使用語法:
<ol type="a" start="3"> <li>菠蘿</li> <li>西瓜</li> <li value="20">火龍果</li> </ol>
運行結果:
type屬性詳解:
start表示開始進行編號的數值,start=‘2’即從第二個標號開始進行編號(如2,b,B,II,ii);
value可指定某個li的特定編號值,使用在某編號脫離正常編號值時。
reversed是h5新屬性,使列表編號倒序排列,demo如下:
<ol reversed="reversed"> <li>菠蘿</li> <li>西瓜</li> <li>火龍果</li> </ol>
chrome運行結果如下:
FF運行結果:
IE11運行結果:
可見IE11以更早的版本均不兼容ol reversed屬性。
ol li 不顯示編號?
一種是初始化時設置了ol或者li的 list-style:none;樣式,只需刪除即可。
二是設置了ol,li的左邊距為0,例如 margin:0px; padding:0 等,比較容易被遺忘而出錯的是初始化時設置的 *{margin:0;padding:0;}
有序序列需要一定的左邊距來進行編號,若左邊距為零則自然無法顯示標號。
解決方法:1、可為ol加上margin-left或padding-left;
2、為li加上margin-left;
一般左邊距為10px即可實現編號,當然要結合字體大小等因素,請讀者根據實際頁面自行調整。
下圖為左邊距為5px時的編號圖:
下圖為左邊距為10px時的編號圖:
用CSS樣式代替ol type屬性
type值 | 等同於list-style-type |
---|---|
type="1" |
decimal數字(默認樣式) |
type="a" |
lower-alpha小寫字母 |
type="A" |
upper-alpha大寫字母 |
type="i" |
lower-roman 小寫羅馬文字 |
type="I" |
upper-roman 大寫羅馬文字 |
除以上屬性外,list-style-type還提供了 decimal-leading-zero 十進制數 | lower-greek小寫希臘字母 | lower-latin小寫拉丁文 | upper-latin 大寫拉丁文| armenian亞美尼亞數字 | georgian喬治亞數字 | none無 | inherit繼承
對於ul,list-style-type的屬性如下:disc 點(默認)| circle圓圈 | square正方形
list-style-position屬性
該屬性用於聲明列表標誌相對於列表項內容的位置。外部 (outside) 標誌會放在離列表項邊框邊界一定距離處,不過這距離在 CSS 中未定義。內部 (inside) 標誌處理為好像它們是插入在列表項內容最前面的行內元素一樣。
取值: list-style-position:inside/outside
註:有的時候outside不起作用,原因是加了浮動
list-style-image屬性
使用圖像來替換列表項的標記
取值:list-style-image:none/url(‘’)
自定義序列
參考資料:http://www.adminwang.com/html/37.html
http://www.runoob.com/tags/tag-ol.html
http://www.jb51.net/html5/376734.html
http://blog.csdn.net/abeetle/article/details/41246741
轉載請註明出處:絲瓜 ? 有序序列ol li 詳解(ol li 標號未顯示?)
有序序列ol li 詳解(ol li 標號未顯示?)