CSS list-style-position 屬性 · W3School CSS 參考手冊

# CSS list-style-position 屬性 ## 實例規定列表中列表項目標記的位置： ``` ul { list-style-position:inside; } ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有瀏覽器都支持 list-style-position 屬性。注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。 ## 定義和用法 list-style-position 屬性設置在何處放置列表項標記。 ### 說明該屬性用于聲明列表標志相對于列表項內容的位置。外部 (outside) 標志會放在離列表項邊框邊界一定距離處，不過這距離在 CSS 中未定義。內部 (inside) 標志處理為好像它們是插入在列表項內容最前面的行內元素一樣。 | 默認值： | outside | | --- | --- | | 繼承性： | yes | | --- | --- | | 版本： | CSS1 | | --- | --- | | JavaScript 語法： | _object_.style.listStylePosition="inside" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | inside | 列表項目標記放置在文本以內，且環繞文本根據標記對齊。 | | outside | 默認值。保持標記位于文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。 | | inherit | 規定應該從父元素繼承 list-style-position 屬性的值。 | ## TIY 實例 [放置列表標記](/tiy/t.asp?f=csse_list-style-position) 本例演示在何處放置列表標記。 ``` <html> <head> <style type="text/css"> ul.inside { list-style-position: inside } ul.outside { list-style-position: outside } </style> </head> <body> <p>該列表的 list-style-position 的值是 "inside"：</p> <ul class="inside"> <li>Earl Grey Tea - 一種黑顏色的茶</li> <li>Jasmine Tea - 一種神奇的“全功能”茶</li> <li>Honeybush Tea - 一種令人愉快的果味茶</li> </ul> <p>該列表的 list-style-position 的值是 "outside"：</p> <ul class="outside"> <li>Earl Grey Tea - 一種黑顏色的茶</li> <li>Jasmine Tea - 一種神奇的“全功能”茶</li> <li>Honeybush Tea - 一種令人愉快的果味茶</li> </ul> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 列表](/css/css_list.asp "CSS 列表") CSS 參考手冊：[CSS list-style 屬性](/cssref/pr_list-style.asp "CSS list-style 屬性") HTML DOM 參考手冊：[listStylePosition 屬性](/jsref/prop_style_liststyleposition.asp "HTML DOM listStylePosition 屬性")