Aoaob.com 学院正文

表格外观的无序列表

创建日期：2009年6月4日来自：蓝色理想浏览：1813次作者：匿名

参与测试的浏览器：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 全部选择提示：你可先修改部分代码，再按运行]

首页 1 2 3 下一页尾页

责编：yezi
相关搜索：表格无序列表

上一篇：正则表达式高级技巧及实例详解
下一篇：带给你灵感的50个精美网站设计

嗷嗷毙技术网版权申明：大家可以自由转载我站点的文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来链接，自行链接）。文章版权归作者所有。
特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有，文章若有侵犯作者版权，请与我们联系，我们将立即删除修改。

子栏目

搜索

Web

本站

最新热门推荐随机

10个创意滑动大导航网站设计(单页面)
在国外优秀的设计网站中，开始流行一种这样的Web创意设计风格：整站由一个单一页面组成，通过设

浅谈品牌的视觉识别
什么是品牌的视觉传达品牌，这个熟悉而又陌生的名词，有时总会让人产生误解。品牌很广，广到一

佳作欣赏：[Dianae+kerembeyit]插画精选集
[Dianae+kerembeyit]插画精选集开始5张P非出自以上两位作者.Dianae:ht

用CSS3将你的设计带入下个高度
原文：用CSS3将你的设计带入下个高度译自：Take Your Design To The Next

用Photoshop打造质感珍珠
图层样式可以说是Photoshop针对质感的专用工具了，在经过针对性的设置之后，所创造出的质感可

世界各国货币鉴赏
中华人民共和国人民币元中国澳门地区澳门币中国台湾地区元中国香港地区港币

极致美胸诱惑——回忆那曾经的汹涌波涛

广告摄影师的把戏：眼球爆炸，视线模糊

暗夜中的华丽：褪去浮华疯狂的爱上你

惊艳的空中摄影：男人们高高在上的梦想
当摄影遇到飞机，那些由云朵构成的世界，那些被阳光照射着的梦想，顷刻间离生活很近很真实

过季荷花别样红
夏天都过去了，我那卷放了Ｎ久的胶片才冲洗出来，还要感谢老崔帮忙扫描，要不然猴年马月才能跟各位见面

极致美胸诱惑——回忆那曾经的汹涌波涛

洞房花烛夜完美婚房装修设计六大看点
新婚燕尔，前来祝福的亲朋好友络绎不绝，因此客厅的布置不易太过特立独行，应以舒适亲切为主，既要

墨西哥设计师Lourdes Zolezzi海报设计

分离设计! Mac Tablet概念笔记本电脑!
笔记本的概念机型总能让人提起无尽遐想，最近由国外媒体曝光的一款苹果概念机型再一次引起了网友的极大兴趣

Roberto Campus教程
本文由 tsabobo 翻译整理 #1 -草图使用工具： Photoshop 7, Wac

kaandittb™ - online

陈绍华：创新何故找不着“北”？
找北，大概是设计师一辈子要面对的问题，也是设计工作的核心内容。找北有两个层面，既“放”和“收”，

时尚小资的开放式卫生间性感全力释放

Photoshop鼠绘教程：绘制逼真的美丽蝴蝶
最终效果：关键词：路径加深减淡工具很少。。操作很繁。。。一、用钢笔工具绘制如图

系统系	- 操作系统 - 工具软件 - 病毒安全 - Vista专区	WEB2.0	- 奇趣 - 发现分享 - 评论员文章 - 沈阳网站制作	视　频	- 体育 - 娱乐 - 科技 - 教程
办公系	- Word - Excel - Powerpoint - 圣诞祝福	动画系	- Flash - Ascript - Flex - MsE Design 教程	编程系	- Asp - Asp.Net - Php - Jsp、Java - CGI/perl
艺术系	- 酷赏 - 工业 - 建筑 - 界面 - 平面 - 视觉	网站系	- HTML/Xhtml - Js、Ajax - Css - XML、XSLT	下　载	- 图形图像 - 多媒体 - 系统办公