慎用UL列表

作者：rainoxu 来源：蓝色理想时间：2009-03-25 20:21:00　

今天交流会上，分享前端的开发经验，有一条虽然很快带过，但是我倒是印象蛮深刻的，就写点小结来分享一下吧。

不知道是标准害了大家还是大家害了标准，继class和div被滥用后，ul列表也有被不正确使用的趋势。似乎对于一个能被排成序列的东西，我们往往会习惯性地给它们用一个ul框起来，这样会显得很有语义。当一个页面里有太多的元素被这样处理时，考虑一下如果要兼容到移动终端的访问或者CSS加载不正常的时候，那么用户的体验是非常不佳的，试想一下移动终端上面最好是能把尽可能多的内容呈现在极其有限的屏幕里，而ul在没有样式修饰的情况下，是会向下延伸的，对于超长的页面，用户在移动终端上向下滚动页面时，是会失去耐心的，对于网页也是一样，至少就我本人来说，我在阅读百度知道的一些资料时，会禁掉CSS样式，偶尔也会碰到一些体验不佳的页面。

其实我觉得inline的元素可以适当地采用，特别是像做一个横向的列表时，我们是不是可以考虑一下用内联来呈现视觉呢？好像这样说有点晕，那就用一些“粗糙”的实例来说明一下问题吧。要实现一个这样的导航，大家都会想到用ul。

OK，那我们就先用ul列表来实现它（样式方面不作太多深究，只为实现效果，所以写得很随意）

源代码

<!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" lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="gb2312" /><title>www.aspxhome.com</title></head><body><style type ="text/css"> /* <![CDATA[ */ *{ list-style:none; margin:0; padding:0; font-size:12px;}#navigation{ margin:10px auto; width:510px; overflow:hidden;}#navigation li{ float:left; text-align:center; width:50px; border-left:1px solid #CCC; margin-left:-1px;}#navigation li a,#navigation li a:hover{ color:#999;}/* ]]> */ </style> <ul id="navigation"> <li><a href="">菜单1</a></li> <li><a href="">菜单2</a></li> <li><a href="">菜单3</a></li> <li><a href="">菜单4</a></li> <li><a href="">菜单5</a></li> <li><a href="">菜单6</a></li> <li><a href="">菜单7</a></li> <li><a href="">菜单8</a></li> <li><a href="">菜单9</a></li> <li><a href="">菜单10</a></li></ul></body></html>

嗯，很棒，很漂亮的代码，在DOM查看器里发现真是太完美了：