CSS3 Columns: 消失的項目符號

之前在做 CoverTunes (如上圖,註1) 的時候,為了實作 iTunes 11 新的 Expanded View 會隨著視窗寬度把專輯裡面的曲目清單分配為多個欄位的這個特點 ,所以我用了編號清單 <ol> 搭配 CSS coluun 下去做:

(-vendor-)column-count: 2;
(-vendor-)column-gap: 40px;

結果欄位分得是蠻平均的,左右兩邊的 <li> 數量差不多 —可是在前面的編號就不見了— 在 Webkit 下是直接消失;在 Firefox 下面則是只有右邊那欄位出現。

結果問題其實很簡單:因為 <li> 的項目符號預設是畫在他本身 box 的外面,而下了 CSS columns 之後,大概是為了把內容對齊 coloumn ,所以超出去的部份就被切掉了。然後剛好 WebKit 切的跟 Firefox (Gecko) 不一樣。

所以解法有兩種,一種是對 <li> 下個 margin-left 推出一點空間給他顯示項目編號就好了;或是可以指定他 list-style-position: inside; 讓他把項目編號畫在 <li> 本身的 box 裡面,就不會因為在 column 下沒有幫 <li> 保留前面 bullet 的空間而消失了。


註解

  1. ColorTunes 為我與 @dannvix 合作的專案。我做的 CoverTunes 構成 iTunes Expanded View 外觀與互動效果重製;@dannvix 則實作根據專輯圖片自動變色的功能。兩者合一為 ColorTunes 展示頁面
comments powered by Disqus