---

之前在文章清單中，如果有標題的文章太長
超過視窗邊緣就會自動換行，像這樣：

    249   6 08-25 Knuckles      □ 在宜蘭礁溪記念一PO
    250   5 08-26 Knuckles      □ 今天CVGIP的照片
    251   3 08-29 henrithl1984s □ 發現一本好書:The Scientist and Engineer's Guide to
                                Digital Signal Proc
●  252   1 08-29 dato          □ 發現一張好照

因為原本的清單是用table來排版的
可是這樣很不好看，所以一直想找方法讓他不會換行
這幾天終於找到方法了，改用span來排版

其實在很久以前這個站的第二版時，就曾經把table給改成div/span過
只是因為網路上很多人說table不好，要用div/span
不過用下去的問題很多，像是table可以訂每一格要多寬
而span沒有辦法，所以就塞一堆空格進去，讓他變成想要的寬度
而像使用者名稱那種不固定長度的資料，還要算出後面該填幾個空格...
搞的程式碼變得很難看，結果第三版又改回table了...

結果現在為了換行的問題又改回用span了
在網路上有找到想要設定span寬度，必需使用style加入display: inline-block;
像這樣：<span style="width:200px; display:inline-block;"> </span>
不過這樣用了之後，行距會變很大，試半天也縮不回來... Orz

最後終於找到辦法了，根本就不用設定他的寬度
只要強制指定他的水平位置就好了...
<span style="position:absolute; left:100px;">100px</span>
然後依照每個半型字的寬度是11px就可以算出每一個格要出現在什麼位置了
結果像這樣：
而最後一個放文章標題的span的style再加上white-space:nowrap;就可以不斷行了...

用span有另一個好處是可以靠右對齊...
<span style="position:absolute; right:8px;">靠右對齊的文字</span>
結果像這樣：
<span style="position:absolute; right:8px;">靠右對齊的文字</span>
就可以隨視窗大小而移動了
在看板清單的板主名單與下面的推文IP日期就是用這個達到靠右對齊的...
雖然用table也是可以做到靠右對齊，不過會擠到中間的資料，使得中間資料會有換行問題...

--
※ 來源: 台大電信 DISP 實驗室 (http://disp.twbbs.org)
※ 作者: Knuckles  來自: 140.112.175.130  時間: 2008-10-02 03:00:05

※ 編輯: Knuckles  來自: 140.112.175.130  時間: 2008-10-02 03:03:58
※ 編輯: Knuckles  來自: 140.112.175.128  時間: 2008-10-02 12:00:46