CSS + ul li 横向排列的两种方法

blogdaren 2013-06-23 抢沙发 1779人次

HTML源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS + ul li 横向排列的两种方法 </title>
<link href="http://blog.163.com/lgh_2002/css1/lian1.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="nav">
  <ul>
    <li><a href="http://www.blogdaren.com/" title="">blogdaren</a></li>
    <li><a href="http://www.blogdaren.com/" title="">blogdaren</a></li>    
    <li><a href="http://www.blogdaren.com/" title="">blogdaren</a></li>
    <li><a href="http://www.blogdaren.com/" title="">blogdaren</a></li>
  </ul>
  </div>
</body>
</html>

CSS代码一:

*{margin:0; border:0; padding:0; font-size:13pt;}
#nav{height:40px;border-top:#060 2px solid;border-bottom:#060 2px solid;background-color:#690;}
#nav ul{list-style:none;margin-left:50px;}
#nav li{display:inline;line-height:40px;}
#nav a{color:#fff;text-decoration:none;padding:20px 20px;}
#nav a:hover{background-color:#060;}

CSS代码二:

*{margin:0; border:0; padding:0; font-size:13pt;}
#nav{height:40px;border-top:#060 2px solid;margin-top:100px;border-bottom:#060 2px solid;background-color:#690;}
#nav ul{list-style:none;line-height:40px;margin-left:50px;}
#nav li{display:block;float:left;}
#nav a{display:block;color:#fff;text-decoration:none;padding:0 20px;}
#nav a:hover{background-color:#060;}

版权声明:除非注明,本文由( blogdaren )原创,转载请保留文章出处。

本文链接:CSS + ul li 横向排列的两种方法

发表评论:

您的昵称:
电子邮件:
个人主页: