WEBTECH 網頁設計教學站
CSS list-style-position 列表位置
CSS list-style-position 列表位置的功能顧名思義就是用來控制(或設計)網頁內容的項目清單(或項目標籤)的位置,也就是 HTML 的 ul li 標籤或 ol li 標籤的顯示位置,傳統的 HTML 項目標籤功能僅能顯示,很難控制位置,透過 CSS list-style-position 列表位置的調整,我們就能決定 li 清單是要在 ul 或 ol 區域外還是內顯示,這樣說比較抽象,待會兒的範例會讓各位看得比較清楚。

CSS list-style-position 基本語法
list-style-position: 顯示未置參數;
CSS list-style-position 允許的參數有三個,分別是 inside、outside 與 inherit,效果整理如下
  • inside 是指項目清單的內容在 <li></li> 標籤範圍之內。
  • outside 是指項目清單的內容在 <li></li> 標籤範圍之內。
  • inherit 是繼承自父層的設定值。
除了 inherit 比較不建議使用之外,因為部份瀏覽器支援不佳,另外兩個 inside 與 outside 的應用寫在範例內。

CSS list-style-position 列表位置實際範例
<ul style="list-style-position:inside;">
 <li>Test list style position inside.</li>
 <li>Test list style position inside.</li>
</ul>
<ul style="list-style-position:outside;">
 <li>Test list style position outside.</li>
 <li>Test list style position outside.</li>
</ul>
範例結果
  • Test list style position inside.
  • Test list style position inside.
  • Test list style position outside.
  • Test list style position outside.
我們在範例中準備了兩組 HTML 的 ul li 項目清單組,分別透過 CSS list-style-position 列表位置調整顯示的清單內容在 li 內側與外側顯示,各位可以很明顯得看到它門的差異,這樣的細微調整在網頁內容排版上相當有用。

更多項目清單設計

連絡我們