CSS 清單選項 (一)

陳育霖

清單選項符號: list-style-type
ul: disc 預設，實心圓點、circle 空心圓點、square 實心方塊、none 不顯示
ol: decimal 阿拉伯數字(1、2、3)、decimal-leading-zero 阿拉伯數字(01、02、03)、lower-roman/upper-roman 大小寫羅馬數字、lower-alpha/upper-alpha大小寫英文

1. <ul style="list-style-type: circle">
   
2.   <li>午餐</li>
   
3.   <li>晚餐</li>
   
4. <ul>
   
5. <ol style="list-style-type: decimal">
   
6.   <li>午餐</li>
   
7.   <li>晚餐</li>
   
8. <ol>

複製代碼

清單選項圖片: list-style-image
none 無、url 圖片位置

1. ul {
   
2.   list-style-image: url(blue.jpg);
   
3. }

複製代碼

符號與編號位置: list-style-position
inside 內部、outside 外部

1. ul {
   
2.   list-style-position: outside;
   
3. }
   
4. ol {
   
5.   list-style-position: inside;
   
6. }

複製代碼