作者：14px 時間： 2009-06-03 文檔類型：原創(chuàng) 來自：藍色理想
第 1 頁 表格外觀的無序列表 [1] 第 2 頁 表格外觀的無序列表 [2] 第 3 頁 表格外觀的無序列表 [3]
最后讓我們隱藏多余的那一行：
運行代碼框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" title="Home" /> <title>表格外觀的無序列表 - 隱藏多余的一行</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} div { overflow:hidden; zoom:1;} ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1; margin-bottom:-24px;} li { width:20%; *width:19.9%;/*IE6&IE7的寬度有點點囧*/ float:left;} span { display:block; border-left:1px solid #cfdae8; height:24px; font:12px/24px tahoma; padding:0 4px;} a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none; position:relative; top:-24px;} a:hover { color:#f60;} </style> </head> <body> <div> <ul> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span><a title="Prison Break / 越獄" href="#nogo">Prison Break / 越獄 </a></span></li> <li><span><a title="Gossip Girl / 八卦天后" href="#nogo">Gossip Girl / 八卦天后 </a></span></li> <li><span><a title="Friends / 老友記 / 六人行" href="#nogo">Friends / 老友記 / 六人行</a></span></li> <li><span><a title="Heroes / 超能英雄" href="#nogo">Heroes / 超能英雄</a></span></li> <li><span><a title="Desperate Housewives / 絕望的主婦" href="#nogo">Desperate Housewives / 絕望的主婦 </a></span></li> <li><span><a title="Sex and the City / 欲望都市" href="#nogo">Sex and the City / 欲望都市 </a></span></li> <li><span><a title="Prison Break: Proof of Innocence / 越獄 第二季" href="#nogo">Prison Break: Proof of Innocence / 越獄 第二季</a></span></li> <li><span><a title="Lost / 迷失" href="#nogo">Lost / 迷失</a></span></li> <li><span><a title="Grey's Anatomy / 實習醫(yī)生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 實習醫(yī)生格蕾 / 格蕾的解剖 </a></span></li> <li><span><a title="Lie to Me / 千謊百計" href="#nogo">Lie to Me / 千謊百計 </a></span></li> <li><span><a title="The Big Bang Theory / 天才理論傳 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理論傳 / 生活大爆炸 </a></span></li> <li><span><a title="Growing Pains / 成長的煩惱" href="#nogo">Growing Pains / 成長的煩惱 </a></span></li> <li><span><a title="Prison Break (Season 3) / 越獄 第三季" href="#nogo">Prison Break (Season 3) / 越獄 第三季</a></span></li> <li><span><a title="House M.D. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生" href="#nogo">House M.D. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生 </a></span></li> <li><span><a title="Ugly Betty / 丑女貝蒂" href="#nogo">Ugly Betty / 丑女貝蒂 </a></span></li> <li><span><a title="Gossip Girl season2 / 八卦天后 第二季" href="#nogo">Gossip Girl season2 / 八卦天后 第二季</a></span></li> <li><span><a title="CSI: Crime Scene Investigation / 犯罪現(xiàn)場：拉斯維加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪現(xiàn)場：拉斯維加斯</a></span></li> </ul> </div> </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
解決3很抽搐，在birdstudio的幫助下找到了新的方法，這方法不用加空標簽。
原理單用文字描述太復雜了，也不能描述得很清楚，自己看源碼吧，關鍵在li的高度與margin的設置上，多余的部分也隱藏了。
運行代碼框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" title="Home" /> <title>表格外觀的無序列表 - 不用加空標簽了，真美好，謝謝birdstudio的思路</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} div { overflow:hidden; zoom:1; position:relative;} ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1; margin-bottom:-24px; padding-top:24px;} li { width:20%; *width:19.9%;/*IE6&IE7的寬度有點點囧*/ float:left; margin-top:-24px; height:48px; position:relative;} span { display:block; border-left:1px solid #cfdae8; height:48px; font:12px/24px tahoma; padding:0 4px;} a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none; position:relative; } a:hover { color:#f60;} </style> </head> <body> <div> <ul> <li><span><a title="Prison Break / 越獄" href="#nogo">Prison Break / 越獄 </a></span></li> <li><span><a title="Gossip Girl / 八卦天后" href="#nogo">Gossip Girl / 八卦天后 </a></span></li> <li><span><a title="Friends / 老友記 / 六人行" href="#nogo">Friends / 老友記 / 六人行</a></span></li> <li><span><a title="Heroes / 超能英雄" href="#nogo">Heroes / 超能英雄</a></span></li> <li><span><a title="Desperate Housewives / 絕望的主婦" href="#nogo">Desperate Housewives / 絕望的主婦 </a></span></li> <li><span><a title="Sex and the City / 欲望都市" href="#nogo">Sex and the City / 欲望都市 </a></span></li> <li><span><a title="Prison Break: Proof of Innocence / 越獄 第二季" href="#nogo">Prison Break: Proof of Innocence / 越獄 第二季</a></span></li> <li><span><a title="Lost / 迷失" href="#nogo">Lost / 迷失</a></span></li> <li><span><a title="Grey's Anatomy / 實習醫(yī)生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 實習醫(yī)生格蕾 / 格蕾的解剖 </a></span></li> <li><span><a title="Lie to Me / 千謊百計" href="#nogo">Lie to Me / 千謊百計 </a></span></li> <li><span><a title="The Big Bang Theory / 天才理論傳 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理論傳 / 生活大爆炸 </a></span></li> <li><span><a title="Growing Pains / 成長的煩惱" href="#nogo">Growing Pains / 成長的煩惱 </a></span></li> <li><span><a title="Prison Break (Season 3) / 越獄 第三季" href="#nogo">Prison Break (Season 3) / 越獄 第三季</a></span></li> <li><span><a title="House M.D. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生" href="#nogo">House M.D. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生 </a></span></li> <li><span><a title="Ugly Betty / 丑女貝蒂" href="#nogo">Ugly Betty / 丑女貝蒂 </a></span></li> <li><span><a title="Gossip Girl season2 / 八卦天后 第二季" href="#nogo">Gossip Girl season2 / 八卦天后 第二季</a></span></li> <li><span><a title="CSI: Crime Scene Investigation / 犯罪現(xiàn)場：拉斯維加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪現(xiàn)場：拉斯維加斯</a></span></li> </ul> </div> <br /><br />不用加空標簽了，真美好，謝謝birdstudio的思路 </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
經典論壇交流：http://bbs.blueidea.com/thread-2930185-1-1.html
出處：藍色理想 責任編輯：bluehearts
上一頁 表格外觀的無序列表 [2] 下一頁
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
藍色理想版權申明：除部分特別聲明不要轉載，或者授權我站獨家播發(fā)的文章外，大家可以自由轉載我站點的原創(chuàng)文章，但原作者和來自我站的鏈接必須保留（非我站原創(chuàng)的，按照原來自一節(jié)，自行鏈接）。文章版權歸我站和作者共有。
轉載要求：轉載之圖片、文件，鏈接請不要盜鏈到本站，且不準打上各自站點的水印，亦不能抹去我站點水印。
特別注意：本站所提供的攝影照片，插畫，設計作品，如需使用，請與原作者聯(lián)系，版權歸原作者所有，文章若有侵犯作者版權，請與我們聯(lián)系，我們將立即刪除修改。
第 1 頁 
第 3 頁 表格外觀的無序列表 [3]
