用css实现表格外观的无序列表

作者佚名技术来源 CSS技术浏览发布时间 2012-03-02

色…

问题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 全部选择提示：你可先修改部分代码，再按运行]

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

关于用css实现表格外观的无序列表的所有评论

随机推荐