作者：14px 时间： 2009-06-03 文档类型：原创 来自：蓝色理想
第 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" href="http://www.14px.com" 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 / 实习医生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖 </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. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">House M.D. / 怪杰医生豪斯 / 豪斯医生 </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 / 犯罪现场：拉斯维加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯</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" href="http://www.14px.com" 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 / 实习医生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖 </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. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">House M.D. / 怪杰医生豪斯 / 豪斯医生 </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 / 犯罪现场：拉斯维加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯</a></span></li> </ul> </div> <br /><br />不用加空标签了，真美好，谢谢birdstudio的思路 </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
经典论坛交流：http://bbs.blueidea.com/thread-2930185-1-1.html
出处：蓝色理想 责任编辑：bluehearts
上一页 表格外观的无序列表 [2] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
蓝色理想版权申明：除部分特别声明不要转载，或者授权我站独家播发的文章外，大家可以自由转载我站点的原创文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来自一节，自行链接）。文章版权归我站和作者共有。
转载要求：转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印，亦不能抹去我站点水印。
特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有，文章若有侵犯作者版权，请与我们联系，我们将立即删除修改。
本文总共有 9 条评论，现在显示最新的 5 条。评分：- llllllllllllllllllll + 评分人数: 4 ,平均分: 4.00
查看全部评论
第 1 页 
第 3 页 表格外观的无序列表 [3]
