CSS 項目符號及編號


如果項目符號 CSS list-tyle 定義式符號,其優先順序要比 list-style-type 高,段落縮排效果首先觀察元素 <ul><li> 預設的邊界值 marginpadding 是否符合需求,進一步調整以符合網頁中版面的設計。

list-style:none;
list-style-type: none; /*沒有標誌,不使用編號*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼

自訂標號圖示

list-style-type: disc; /*實心圓形符號*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: circle; /*空心圓形符號*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: square; /*實心方形符號*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: decimal; /*阿拉伯數字*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: decimal-leading-zero; /*阿拉伯數字(十進制前置零)*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: lower-roman; /*小寫羅馬數字*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: upper-roman; /*大寫羅馬數字*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: lower-alpha; /*小寫英文字母*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: upper-alpha; /*大寫英文字母*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: thai; /*泰語*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: lower-greek; /*希臘語*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: armenian; /*亞美尼亞*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: bengali; /*孟加拉*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: georgian; /*格魯吉亞語*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: kannada; /*卡納達語*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: oriya; /*奧里亞*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: devanagari; /*梵文*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: '# '; /*自定使用字元符*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: '\1F56A'; /*十六進位 Unicode 符號*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-image: url(images/tick.png); /*圖片式符號亦可使用 SVG 格式*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-image: linear-gradient(0deg, #ffe9d4, #cc6600); /*漸層符號*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼


list-style-position 列表位置

CSS 指定列表的位置(預設值) outside 凸排在主容器的外面。inside 縮排項目清單中的符號於格內的位置。

list-style: decimal outside; /*縮寫方式*/
list-style-type: decimal;
list-style-position: outside; /*凸排(預設值)*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼
list-style-type: decimal;
list-style-position: inside; /*縮排(符號於格內的位置內容再接在其後)*/
  • Canon 佳能相機
  • FUJI 富士相機
  • Nikon 尼康相機
  • OLYMPUS 相機
  • Panasonic 相機
  • SONY 索尼