标签：060 color margin li ul nav height border CSS
<!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>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</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;
float:left
}
#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;
}
标签：060,color,margin,li,ul,nav,height,border,CSS 来源： https://www.cnblogs.com/yuer20180726/p/11005571.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。