CSS经验: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></title>
</head>
<body>
<style type ="text/css">
/* <![CDATA[ */
*{
      margin:0;
      padding:0;
      font-size:12px;
}
#navigation{
      display:block;
      width:510px;
      margin:10px auto;
      overflow:hidden;
}
#navigation a{
      display:block;
      float:left;;
      width:50px;
      text-align:center;
      color:#999;
      border-left:1px solid #CCC;
      margin-left:-1px;
}
/* ]]> */
</style>
<span id="navigation">
      <a href="">菜单1</a>
      <a href="">菜单2</a>
      <a href="">菜单3</a>
      <a href="">菜单4</a>
      <a href="">菜单5</a>
      <a href="">菜单6</a>
      <a href="">菜单7</a>
      <a href="">菜单8</a>
      <a href="">菜单9</a>
      <a href="">菜单10</a>
</span>

</body>
</html>

呵呵，这下看到了一个span，一串的a，li消失了，而且span是内联的元素，内部装a标签也是符合(x)html的嵌套规范的。DOM结构依然清晰：

没有样式的情况下，也很友好（下面第一个图），而且内联元素是自适应宽度的，宽度不够就折行（下面第二个图），这就是我前面提到的，要尽可能多地往有限的屏幕里填充内容，如果用li，那么一个一个就浪费了大片空间咯。

写到这里，我觉得也把我的粗略的，不成熟的想法表达得差不多了，每一次的开发，都要不断地思考，不断地倾听别人的想法，我也只是把同事的一个想法变成了具体的实现，做前端开发的，不仅需要技术，也需要创意，还需要不断的思考。

文章共2页: [1] [2]

更多的CSS经验:ul列表不正确使用的趋势请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：网页教学网日期：2009-3-26