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 內側與外側顯示，各位可以很明顯得看到它門的差異，這樣的細微調整在網頁內容排版上相當有用。

更多項目清單設計
© Copyright webtech.tw Since 2010