HTML代碼
表格外觀的無序列表 - 原始狀態
像一個表格吧？ ^-^
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]這是一個最簡單的模型，然而，實戰總是殘酷的：1、寬度如何自適應分辨率？ 2、單元格內容過多、形成換行如何處理？ 3、最糾結的問題：5×4的表格，如果只有17條數據怎麼辦？empty-cell也黯然失色…問題1：寬度如何自適應分辨率？這個問題也許有人說沒必要，但是在模塊化設計時，幾乎任何部件都被要求設置為寬度自適應模式的。解決1：參考完美的firefox3和ie8百分比寬度處理方案，給剩餘的寬度分配給某個「列」，就行了 ^-^記得二列等高的笨辦法嗎？——用背景圖片模擬。問題2：單元格內容過多、形成換行如何處理？解決2：隱藏吧，它已經沒有存在的價值了！（ - -! 其實是我想不出別的辦法來了）但為了體驗好一點，我加上了text-overflow。這個，FF暫時不支持……aoao有好的解決辦法，其他點的解決辦法。
HTML代碼
表格外觀的無序列表 - 過剩文字的處理
- Prison Break / 越獄
- Gossip Girl / 八卦天後
- Friends / 老友記 / 六人行
- Heroes / 超能英雄
- Desperate Housewives / 絕望的主婦
- Sex and the City / 慾望都市
- Prison Break: Proof of Innocence / 越獄 第二季
- Lost / 迷失
- Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖
- Lie to Me / 千謊百計
- The Big Bang Theory / 天才理論傳 / 生活大爆炸
- Growing Pains / 成長的煩惱
- Prison Break (Season 3) / 越獄 第三季
- House M.D. / 怪傑醫生豪斯 / 豪斯醫生
- Ugly Betty / 醜女貝蒂
- Gossip Girl season2 / 八卦天後 第二季
- CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯
- Heroes(Season 2) / 天驕 / 超能英雄
- 24 / 24反恐部隊 / 24小時
- Cashmere Mafia / 女人幫
實際應用的時候，通過對單元文字長度範圍的預測、應用區域寬度的結合考慮，可通過調整列數來達到我們想要的效果。
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]問題3：5×4的表格，如果只有17條數據怎麼辦？empty-cell也黯然失色…看這個Demo，其實我覺得這個樣子不影響閱讀，也不難看了，可Boss和他的Money不樂意。
HTML代碼
表格外觀的無序列表 - 5×4的表格，如果只有17條數據怎麼辦？
- Prison Break / 越獄
- Gossip Girl / 八卦天後
- Friends / 老友記 / 六人行
- Heroes / 超能英雄
- Desperate Housewives / 絕望的主婦
- Sex and the City / 慾望都市
- Prison Break: Proof of Innocence / 越獄 第二季
- Lost / 迷失
- Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖
- Lie to Me / 千謊百計
- The Big Bang Theory / 天才理論傳 / 生活大爆炸
- Growing Pains / 成長的煩惱
- Prison Break (Season 3) / 越獄 第三季
- House M.D. / 怪傑醫生豪斯 / 豪斯醫生
- Ugly Betty / 醜女貝蒂
- Gossip Girl season2 / 八卦天後 第二季
- CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯
其實我覺得這個樣子不影響閱讀，也不難看了，可Boss和他的Money不樂意。
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]解決3：首先讓我們製造出我們想要的表格（很遺憾，製造了很多空標籤，暫時沒有找到更合適的純CSS解決方案，歡迎大家多多指點）。
HTML代碼
表格外觀的無序列表 - 讓我們製造出我們想要的表格
- Prison Break / 越獄
- Gossip Girl / 八卦天後
- Friends / 老友記 / 六人行
- Heroes / 超能英雄
- Desperate Housewives / 絕望的主婦
- Sex and the City / 慾望都市
- Prison Break: Proof of Innocence / 越獄 第二季
- Lost / 迷失
- Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖
- Lie to Me / 千謊百計
- The Big Bang Theory / 天才理論傳 / 生活大爆炸
- Growing Pains / 成長的煩惱
- Prison Break (Season 3) / 越獄 第三季
- House M.D. / 怪傑醫生豪斯 / 豪斯醫生
- Ugly Betty / 醜女貝蒂
- Gossip Girl season2 / 八卦天後 第二季
- CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯
很遺憾，製造了很多空標籤，暫時沒有找到更合適的純CSS解決方案，歡迎大家多多指點。
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]然後用position:relative實現css移魂大法：
HTML代碼
- Prison Break / 越獄
- Gossip Girl / 八卦天後
- Friends / 老友記 / 六人行
- Heroes / 超能英雄
- Desperate Housewives / 絕望的主婦
- Sex and the City / 慾望都市
- Prison Break: Proof of Innocence / 越獄 第二季
- Lost / 迷失
- Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖
- Lie to Me / 千謊百計
- The Big Bang Theory / 天才理論傳 / 生活大爆炸
- Growing Pains / 成長的煩惱
- Prison Break (Season 3) / 越獄 第三季
- House M.D. / 怪傑醫生豪斯 / 豪斯醫生
- Ugly Betty / 醜女貝蒂
- Gossip Girl season2 / 八卦天後 第二季
- CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯