min'cellanea

之前一直不了解 <li> 和 <lu> 代表什麼意思，今天小小研究了一下。




先看看下面的語法，在和上圖做比較。

ul { 　list-style-type:none; 　padding:2px; } li{ 　list-style-type:none; 　padding:0px 5px 0px 10px; }

ul{}
代表目錄，就是上圖橘色框框的部份，而裡面的 padding 則變成兩個目錄，也就是兩個橘色框框之間的距離。

li{}
子目錄，也就是連結本身的部份。
padding 的大小依序是：上、右、下、左
所以可以發現子目錄的兩行間距部份是 0px，而靠左的部份是 10px (如上圖藍色框框部份)，造成母目錄和子目錄的起始點不一樣，子目錄的起始點相較於母目錄較靠左，可比較橘色框框<li>的語法，padding 最後一個代表「左」的只有 2px 的時候。

list-style-type
項目符號，可選擇各式符號，如：圓圈、英文字母…等等。

list-style-type: none (不編號), decimal (阿拉伯數字), upper/lower-roman (大小寫羅馬數字), upper/lower-alpha (大小寫英文字母), disc (實心圓形符號), circle (空心圓形符號), square (實心方形符號);

list-style-image: url(圖片網址)
如果加了這一行，就會如上圖在子目錄的前面加上圖示。
我試了分別加在 ul{} 和 li{} 裡面，圖示都會出現在子目錄前面，如果兩個都加，則只會出現加在子目錄裡面的圖，母目錄的圖示會被蓋過去。

list-style-position
子目錄部份的凸排(outside)或縮排(inside)。

list-style-position: outside, inside;