關於網頁裡清單(List)的排板問題

其實真正的標題應該是
"如何調整清單的項目符號到後面內容文字之間的間距?",很繞口,
這是一個很久以前就一直困擾著我的問題,
在製作網頁時,常常會用到清單(List)的標籤如: <ul> <ol> <li> ,
它們可以很方便的在網頁上呈現出一個條列式的清單,
簡單舉個例,若我們用html寫下:

  1. 文字內容
  2. 文字內容
  3. 文字內容

那我們在瀏覽器上看的就會是這樣:

對照圖

這是條列很清楚的清單,在製作文字資料頁面時很實用而且對seo也有幫助,
我的問題就是出在"如何調整 "1." 和 "文字內容" 之間的那個間距大小,
假設是要調寬這個間距的話,我們只需要加上簡單的css如下就可以做到:

ol{
  margin-left:2em;  /* 將ol的左方外距設為2em */
  padding:0;  /* 將ol的內距設為0 */
}
li{
  padding-left:1em;  /* 單獨將li元素的左側內距設為1em */
}

顯示結果為:

對照圖

我們可以看到間距已經被我們成功的拉開一個字距了,
這麼簡單可以解決的,偏偏卻不是我需要的,
我是想要拉近這個間距,這下問題來了,
padding(內距)的值設在為0,且不能設為負數;margin(外距)才可設為負數,
於是我想,簡單嘛! 就像剛剛單獨設定li元素一樣,
我單獨把li元素的左方外距設為負的就可以了吧~
於是我把剛剛的css中li元素的部份改為:

ol{
  margin-left:2em;
  padding:0;
}
li{
  padding-left:0;  /* 將li元素的左側內距設為0 */
  margin-left:-1em;  /* 將li的左方外距設為-1em */
}

結果卻變成:

對照圖

怎麼會這樣!? 把文字內容往後拉就可以,想要往前縮時卻把項目符號給擠到畫面外去了...
真是不合理,不死心的我,上網查看看有沒有人討論過這個問題,
在中文網站沒找到什麼相關的參考資料,於是找看看英文,
有了,終於找到也有人在討論這個問題了,
找到了一個叫做 marker-offset 的css設定值,
這邊 有看到詳細的解釋,看起來就像是我想要的功能:

The marker-offset property allows you to specify the distance between the marker and the text relating to that marker.

但是很不幸的也看到了這一句...

Unfortunately, however, this property is not supported in IE 6 or Netscape 7.

什麼跟什麼嘛!都不支援的話那這個設定值是設心酸的唷!!氣死人...
還是靠自己吧!我來增加一個新的要素設定看看:

ol{
  margin-left:2em;
  padding:0;
}
li{
  padding-left:0;
}
li p{            /* 新增一個包在li要素中的p要素之設定 */
  margin-left: -0.4em;  /* 左方外距設為-0.4em */
  margin-bottom:0;  /* 下方外距設為0,否則等等每一條項目間的距離會很遠 */
}

然後將這個p要素套用到li內容當中,
我先套用到第一條項目並且加長一些文字內容,這樣看結果比較清楚,html如下:

  1. 長一點的文字內容長一點的文字內容

  2. 文字內容
  3. 文字內容

之前我是把li設程負的外距,結果整個清單都被往左邊擠出去了,
現在我是另外設一個p的要素專門給清單內的文字使用,照理說應該是行的通的,
我們來看看顯示結果:

對照圖

成功了!! ㄟ...成功了一半...
有看到嗎?在firefox裡頭是沒有問題的,
但是在IE裡,不但那個間距沒有縮短,第一條的項目連同"1."又都被往左擠開了...
討厭的IE...這樣的css明明就很合理,也很標準,但是是IE上看就還是有問題...

如果你是firefox的強烈愛好者,完全不想理會IE的使用者,那麼這個問題就到此結束了,
但是偏偏我很龜毛,IE的使用者還是最多的,所以我又繼續想辦法解決這個問題,
讓兩個瀏覽器看到的都會是我想要的排版,後來我用的方式,已經捨棄ol和li的標籤了,
也就是說我們要自己打上1.2.3...的編號,
並且,對於瀏覽器讀取網頁的角度來說,這已經不是一個"清單"的區塊了,
唉...算是為了讓兩種瀏覽器都能相容的犧牲吧...
css設定為:

.list{
  width:150px;
  margin:0;
  padding:0;
}
.list p{
  text-indent:-1.25em; /* 首行縮排設為-1.25em */
  margin:0 0 0 2em;  /* 的左側內距設為2em , 其餘都為0 */
}

html則如下:

1.長一點的文字內容長一點的文字內容

2.文字內容

3.文字內容

終於,這樣的結果終於令人滿意了:

對照圖

唯一美中不足的(也可能是最嚴重的問題)就是:它已經不是一個真正的清單html語法了

4 則評論

引用連結 | RSS訂閱此評論串
  1. 1. insan

    list 這個的確很腦人
    我大多直接用 css 去控制

    有用 Google 瀏覽器 或 Safari 試試嗎

  2. 2. 小烏龜

    沒有耶~
    目前只用了這兩個最常見的瀏覽器去試...
    英聖有試過嗎?

  3. 3. Shanee

    麻煩告訴我: 清單內容有哪幾種類型? 項目符號? 數字? 影像?

  4. 4. 小烏龜

    有分這三種
    * 有序(ol)
    * 無序(ul)
    * 定義(dl)
    項目符號可以自訂為圓點、正方形、英文、羅馬數字...等十幾種樣式,
    有關這三種的區別及用法可以參考這篇文章:
    http://www.wowbox.com.tw/blog/article.asp?id=2218

留下評論