2009/02/09

橫列的清單

此練習試作一個橫列的清單。使用 OL, UL 製作清單時,預設是垂直排列。如果要水平排列,可以用 float 達成。

  1. OL:建立一個編號的清單。
  2. float:left:元素向左靠,後續內容接在右邊。如果使用 float:right,則會由右向左排列。
  3. list-style-position:inside:項目的編號數字放在元素矩框內。

  • 上例,在 IE6 不會顯示編號數字;Firefox, Safari, Chrome 則有編號數字。

文字行的清單。這個練習使用 display:inline 將清單放在文字行中。要注意的是,數字項目會被省去。

清單加上顏色。這個練習使用 border, background 替清單加上顏色,再用 :hover, :active 加上動態效果。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。

  • 在 IE6 中, display:inline-block 用在 OL,沒有效果;Firefox, Safari, Chrome 都成功。