用css实现表格外观的无序列表- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 用css实现表格外观的无序列表

CSS样式表: CSS网页设计 IE8和IE7共存; CSS2 打印属性让打印HTML文档不出问题; 制作网页中设计段落缩进的方法; CSS border 属性使用说明; CSS border-style 属性使用方法; CSS border-color 属性使用方法; CSS border-width 属性使用教程; CSS padding属性定义边内补白; CSS margin 属性定义边外补白; 网页布局教程掌握CSS网页布局属性; css 背景样式属性说明; span margin 设置生效; html 滚动条在IE6和IE7中兼容性问题; IE6 两个div有间隙的问题（IE 3px bug）; CSS 数字和字母将容器撑大问题解决; 换个角度看页面重构中的语义化; DIY属于个人开发使用的CSS Reset; CSS 空格引起网页布局间距问题; CSS 网页制作时遇到问题的快速参考技巧; css li 去掉点的样式写法

No. « ‹ 20 21 22 23 › »

技术文章搜索

关键字

CSS样式表中的用css实现表格外观的无序列表

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 141 ::

收藏到网摘: n/a

CSS教程:让IE6支持position:fixed 替换和不可替换元素以及显示元素

参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系统：Windows
特别提示：这不是表格的模拟。表格无论在语义、结构，还是在效果实现上，都是无法替代的。本文只针对无序列表在外观方面的一个特殊需求

别看有的东东长得个表格样，其实是披着表格皮的无序列表，为了伟大的语义，我们需要用css实现表格外观的无序列表。

个人喜好，这里采用border和negative margin来实现，非常简单：

这是一个最简单的模型，然而，实战总是残酷的：

宽度如何自适应分辨率？
单元格内容过多、形成换行如何处理？
最纠结的问题：5×4的表格，如果只有17条数据怎么办？empty-cell也黯然失色…

问题1：宽度如何自适应分辨率？
这个问题也许有人说没必要，但是在模块化设计时，几乎任何部件都被要求设置为宽度自适应模式的。

解决1：参考完美的firefox3和ie8百分比宽度处理方案，给剩余的宽度分配给某个“列”，就行了 ^-^
记得二列等高的笨办法吗？——用背景图片模拟。

问题2：单元格内容过多、形成换行如何处理？

解决2：隐藏吧，它已经没有存在的价值了！（ - -! 其实是我想不出别的办法来了）
但为了体验好一点，我加上了text-overflow。这个，FF暂时不支持……aoao有好的解决办法，我也有次点的解决办法。

运行代码框
<!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;} 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;} 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;} a:hover { color:#f60;} </style> </head> <body> <ul> <li><a title="Prison Break / 越狱" href="#nogo">Prison Break / 越狱 </a></li> <li><a title="Gossip Girl / 八卦天后" href="#nogo">Gossip Girl / 八卦天后 </a></li> <li><a title="Friends / 老友记 / 六人行" href="#nogo">Friends / 老友记 / 六人行</a></li> <li><a title="Heroes / 超能英雄" href="#nogo">Heroes / 超能英雄</a></li> <li><a title="Desperate Housewives / 绝望的主妇" href="#nogo">Desperate Housewives / 绝望的主妇 </a></li> <li><a title="Sex and the City / 欲望都市" href="#nogo">Sex and the City / 欲望都市 </a></li> <li><a title="Prison Break: Proof of Innocence / 越狱第二季" href="#nogo">Prison Break: Proof of Innocence / 越狱第二季</a></li> <li><a title="Lost / 迷失" href="#nogo">Lost / 迷失</a></li> <li><a title="Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖 </a></li> <li><a title="Lie to Me / 千谎百计" href="#nogo">Lie to Me / 千谎百计 </a></li> <li><a title="The Big Bang Theory / 天才理论传 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理论传 / 生活大爆炸 </a></li> <li><a title="Growing Pains / 成长的烦恼" href="#nogo">Growing Pains / 成长的烦恼 </a></li> <li><a title="Prison Break (Season 3) / 越狱第三季" href="#nogo">Prison Break (Season 3) / 越狱第三季</a></li> <li><a title="House M.D. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">House M.D. / 怪杰医生豪斯 / 豪斯医生 </a></li> <li><a title="Ugly Betty / 丑女贝蒂" href="#nogo">Ugly Betty / 丑女贝蒂 </a></li> <li><a title="Gossip Girl season2 / 八卦天后第二季" href="#nogo">Gossip Girl season2 / 八卦天后第二季</a></li> <li><a title="CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯</a></li> <li><a title="Heroes(Season 2) / 天骄 / 超能英雄" href="#nogo">Heroes(Season 2) / 天骄 / 超能英雄 </a></li> <li><a title="24 / 24反恐部队 / 24小时" href="#nogo">24 / 24反恐部队 / 24小时</a></li> <li><a title="Cashmere Mafia / 女人帮" href="#nogo">Cashmere Mafia / 女人帮 </a></li> </ul> 实际应用的时候，通过对单元文字长度范围的预测、应用区域宽度的结合考虑，可通过调整列数来达到我们想要的效果。 </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

问题3：5×4的表格，如果只有17条数据怎么办？empty-cell也黯然失色…
看这个Demo，其实我觉得这个样子不影响阅读，也不难看了，可Boss和他的Money不乐意。

运行代码框
<!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>表格外观的无序列表 - 5×4的表格，如果只有17条数据怎么办？</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} 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;} 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;} a:hover { color:#f60;} </style> </head> <body> <ul> <li><a title="Prison Break / 越狱" href="#nogo">Prison Break / 越狱 </a></li> <li><a title="Gossip Girl / 八卦天后" href="#nogo">Gossip Girl / 八卦天后 </a></li> <li><a title="Friends / 老友记 / 六人行" href="#nogo">Friends / 老友记 / 六人行</a></li> <li><a title="Heroes / 超能英雄" href="#nogo">Heroes / 超能英雄</a></li> <li><a title="Desperate Housewives / 绝望的主妇" href="#nogo">Desperate Housewives / 绝望的主妇 </a></li> <li><a title="Sex and the City / 欲望都市" href="#nogo">Sex and the City / 欲望都市 </a></li> <li><a title="Prison Break: Proof of Innocence / 越狱第二季" href="#nogo">Prison Break: Proof of Innocence / 越狱第二季</a></li> <li><a title="Lost / 迷失" href="#nogo">Lost / 迷失</a></li> <li><a title="Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖 </a></li> <li><a title="Lie to Me / 千谎百计" href="#nogo">Lie to Me / 千谎百计 </a></li> <li><a title="The Big Bang Theory / 天才理论传 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理论传 / 生活大爆炸 </a></li> <li><a title="Growing Pains / 成长的烦恼" href="#nogo">Growing Pains / 成长的烦恼 </a></li> <li><a title="Prison Break (Season 3) / 越狱第三季" href="#nogo">Prison Break (Season 3) / 越狱第三季</a></li> <li><a title="House M.D. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">House M.D. / 怪杰医生豪斯 / 豪斯医生 </a></li> <li><a title="Ugly Betty / 丑女贝蒂" href="#nogo">Ugly Betty / 丑女贝蒂 </a></li> <li><a title="Gossip Girl season2 / 八卦天后第二季" href="#nogo">Gossip Girl season2 / 八卦天后第二季</a></li> <li><a title="CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯</a></li> </ul> 其实我觉得这个样子不影响阅读，也不难看了，可Boss和他的Money不乐意。 </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

解决3：
首先让我们制造出我们想要的表格（很遗憾，制造了很多空标签，暂时没有找到更合适的纯CSS解决方案，欢迎大家多多指点）。

运行代码框
<!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;} 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;} 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;} a:hover { color:#f60;} </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li><a title="Prison Break / 越狱" href="#nogo">Prison Break / 越狱 </a></li> <li><a title="Gossip Girl / 八卦天后" href="#nogo">Gossip Girl / 八卦天后 </a></li> <li><a title="Friends / 老友记 / 六人行" href="#nogo">Friends / 老友记 / 六人行</a></li> <li><a title="Heroes / 超能英雄" href="#nogo">Heroes / 超能英雄</a></li> <li><a title="Desperate Housewives / 绝望的主妇" href="#nogo">Desperate Housewives / 绝望的主妇 </a></li> <li><a title="Sex and the City / 欲望都市" href="#nogo">Sex and the City / 欲望都市 </a></li> <li><a title="Prison Break: Proof of Innocence / 越狱第二季" href="#nogo">Prison Break: Proof of Innocence / 越狱第二季</a></li> <li><a title="Lost / 迷失" href="#nogo">Lost / 迷失</a></li> <li><a title="Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖 </a></li> <li><a title="Lie to Me / 千谎百计" href="#nogo">Lie to Me / 千谎百计 </a></li> <li><a title="The Big Bang Theory / 天才理论传 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理论传 / 生活大爆炸 </a></li> <li><a title="Growing Pains / 成长的烦恼" href="#nogo">Growing Pains / 成长的烦恼 </a></li> <li><a title="Prison Break (Season 3) / 越狱第三季" href="#nogo">Prison Break (Season 3) / 越狱第三季</a></li> <li><a title="House M.D. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">House M.D. / 怪杰医生豪斯 / 豪斯医生 </a></li> <li><a title="Ugly Betty / 丑女贝蒂" href="#nogo">Ugly Betty / 丑女贝蒂 </a></li> <li><a title="Gossip Girl season2 / 八卦天后第二季" href="#nogo">Gossip Girl season2 / 八卦天后第二季</a></li> <li><a title="CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯</a></li> </ul> 很遗憾，制造了很多空标签，暂时没有找到更合适的纯CSS解决方案，欢迎大家多多指点。 </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

然后用position:relative实现css移魂大法：

运行代码框
<!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>表格外观的无序列表 - 用position:relative实现css移魂大法</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} 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;} 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> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li><a title="Prison Break / 越狱" href="#nogo">Prison Break / 越狱 </a></li> <li><a title="Gossip Girl / 八卦天后" href="#nogo">Gossip Girl / 八卦天后 </a></li> <li><a title="Friends / 老友记 / 六人行" href="#nogo">Friends / 老友记 / 六人行</a></li> <li><a title="Heroes / 超能英雄" href="#nogo">Heroes / 超能英雄</a></li> <li><a title="Desperate Housewives / 绝望的主妇" href="#nogo">Desperate Housewives / 绝望的主妇 </a></li> <li><a title="Sex and the City / 欲望都市" href="#nogo">Sex and the City / 欲望都市 </a></li> <li><a title="Prison Break: Proof of Innocence / 越狱第二季" href="#nogo">Prison Break: Proof of Innocence / 越狱第二季</a></li> <li><a title="Lost / 迷失" href="#nogo">Lost / 迷失</a></li> <li><a title="Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖 </a></li> <li><a title="Lie to Me / 千谎百计" href="#nogo">Lie to Me / 千谎百计 </a></li> <li><a title="The Big Bang Theory / 天才理论传 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理论传 / 生活大爆炸 </a></li> <li><a title="Growing Pains / 成长的烦恼" href="#nogo">Growing Pains / 成长的烦恼 </a></li> <li><a title="Prison Break (Season 3) / 越狱第三季" href="#nogo">Prison Break (Season 3) / 越狱第三季</a></li> <li><a title="House M.D. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">House M.D. / 怪杰医生豪斯 / 豪斯医生 </a></li> <li><a title="Ugly Betty / 丑女贝蒂" href="#nogo">Ugly Betty / 丑女贝蒂 </a></li> <li><a title="Gossip Girl season2 / 八卦天后第二季" href="#nogo">Gossip Girl season2 / 八卦天后第二季</a></li> <li><a title="CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯</a></li> </ul> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

最后让我们隐藏多余的那一行：

运行代码框
<!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></li> <li></li> <li></li> <li></li> <li></li> <li><a title="Prison Break / 越狱" href="#nogo">Prison Break / 越狱 </a></li> <li><a title="Gossip Girl / 八卦天后" href="#nogo">Gossip Girl / 八卦天后 </a></li> <li><a title="Friends / 老友记 / 六人行" href="#nogo">Friends / 老友记 / 六人行</a></li> <li><a title="Heroes / 超能英雄" href="#nogo">Heroes / 超能英雄</a></li> <li><a title="Desperate Housewives / 绝望的主妇" href="#nogo">Desperate Housewives / 绝望的主妇 </a></li> <li><a title="Sex and the City / 欲望都市" href="#nogo">Sex and the City / 欲望都市 </a></li> <li><a title="Prison Break: Proof of Innocence / 越狱第二季" href="#nogo">Prison Break: Proof of Innocence / 越狱第二季</a></li> <li><a title="Lost / 迷失" href="#nogo">Lost / 迷失</a></li> <li><a title="Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖 </a></li> <li><a title="Lie to Me / 千谎百计" href="#nogo">Lie to Me / 千谎百计 </a></li> <li><a title="The Big Bang Theory / 天才理论传 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理论传 / 生活大爆炸 </a></li> <li><a title="Growing Pains / 成长的烦恼" href="#nogo">Growing Pains / 成长的烦恼 </a></li> <li><a title="Prison Break (Season 3) / 越狱第三季" href="#nogo">Prison Break (Season 3) / 越狱第三季</a></li> <li><a title="House M.D. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">House M.D. / 怪杰医生豪斯 / 豪斯医生 </a></li> <li><a title="Ugly Betty / 丑女贝蒂" href="#nogo">Ugly Betty / 丑女贝蒂 </a></li> <li><a title="Gossip Girl season2 / 八卦天后第二季" href="#nogo">Gossip Girl season2 / 八卦天后第二季</a></li> <li><a title="CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯</a></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><a title="Prison Break / 越狱" href="#nogo">Prison Break / 越狱 </a></li> <li><a title="Gossip Girl / 八卦天后" href="#nogo">Gossip Girl / 八卦天后 </a></li> <li><a title="Friends / 老友记 / 六人行" href="#nogo">Friends / 老友记 / 六人行</a></li> <li><a title="Heroes / 超能英雄" href="#nogo">Heroes / 超能英雄</a></li> <li><a title="Desperate Housewives / 绝望的主妇" href="#nogo">Desperate Housewives / 绝望的主妇 </a></li> <li><a title="Sex and the City / 欲望都市" href="#nogo">Sex and the City / 欲望都市 </a></li> <li><a title="Prison Break: Proof of Innocence / 越狱第二季" href="#nogo">Prison Break: Proof of Innocence / 越狱第二季</a></li> <li><a title="Lost / 迷失" href="#nogo">Lost / 迷失</a></li> <li><a title="Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 实习医生格蕾 / 格蕾的解剖 </a></li> <li><a title="Lie to Me / 千谎百计" href="#nogo">Lie to Me / 千谎百计 </a></li> <li><a title="The Big Bang Theory / 天才理论传 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理论传 / 生活大爆炸 </a></li> <li><a title="Growing Pains / 成长的烦恼" href="#nogo">Growing Pains / 成长的烦恼 </a></li> <li><a title="Prison Break (Season 3) / 越狱第三季" href="#nogo">Prison Break (Season 3) / 越狱第三季</a></li> <li><a title="House M.D. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">House M.D. / 怪杰医生豪斯 / 豪斯医生 </a></li> <li><a title="Ugly Betty / 丑女贝蒂" href="#nogo">Ugly Betty / 丑女贝蒂 </a></li> <li><a title="Gossip Girl season2 / 八卦天后第二季" href="#nogo">Gossip Girl season2 / 八卦天后第二季</a></li> <li><a title="CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪现场：拉斯维加斯</a></li> </ul> </div> 不用加空标签了，真美好，谢谢birdstudio的思路 </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

CSS教程:让IE6支持position:fixed 替换和不可替换元素以及显示元素

CSS样式表 中的 用css实现表格外观的无序列表

评论 (0) All

CSS样式表中的用css实现表格外观的无序列表