div+css样式表制作导航怎么使其紧凑排列

时间：2022-02-24 17:11:03
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航条</title>
<style type="text/css">
body,div,ul,li{padding:0;margin:0 auto;}
#nav {
width:960px;
height:35px;
background:#ccc;
margin:0 auto;
margin-top:40px;
margin-left:12em;
margin-right:12em;
float:left;
}
#nav ul{list-style:none;width:960px;height:35px;}
#nav ul li{width:80px;float:left;line-height:35px;text-align:center;padding:0 10px;font-family:微软雅黑;}
   #nav ul li a{display:block;height:35px;font-size:16px;color;#333;text-decoration:none; float:left;}
   #nav ul li a:hover{color:#fff;background:#000;}
</style>
</head>
<body>
<center>
<div id="nav">
<ul>
<li>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">首页</a></li>
<li><a href="http://www.csdn.net/">极客学院</a></li>
<li><a href="http://www.csdn.net/">CSDN博客</a></li>
<li><a href="http://www.csdn.net/">51CTO</a></li>
<li><a href="https://github.com/">GitHub</a></li>
<li><a href="http://www.csdn.net/">北大青鸟</a></li>
<li><a href="http://www.csdn.net/">黑客联盟</a></li>
</ul>
</div>
</center>
</body>
</html>
结果为： div+css样式表制作导航怎么使其紧凑排列
中间空隙很大怎么办？而且margin:0 auto;不能使div居中

2 个解决方案

#1

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>导航条</title>

<style type="text/css">

body,div,ul,li{padding:0;margin:0 auto;}

#nav {

width:960px;

height:35px;

background:#ccc;

margin:0 auto;

margin-top:40px;

}

#nav ul{list-style:none;width:960px;height:35px;}

#nav ul li{float:left;line-height:35px;text-align:center;font-family:微软雅黑;margin:0px 5px;}

#nav ul li a{display:block;font-size:16px;color;#333;text-decoration:none;padding:0px 5px;}

#nav ul li a:hover{color:#fff;background:#000;}	

	#nav ul li a.first{margin-left:20px}	

</style>

</head>

<body>

<center>

<div id="nav">

<ul>

<li><a class="first" href="#">首页</a></li>

<li><a href="http://www.csdn.net/">极客学院</a></li>

<li><a href="http://www.csdn.net/">CSDN博客</a></li>

<li><a href="http://www.csdn.net/">51CTO</a></li>

<li><a href="https://github.com/">GitHub</a></li>

<li><a href="http://www.csdn.net/">北大青鸟</a></li>

<li><a href="http://www.csdn.net/">黑客联盟</a></li>

</ul>

</div>

</center>

</body>

</html>

#2

这么快就搞定了，大神啊

#1

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>导航条</title>

<style type="text/css">

body,div,ul,li{padding:0;margin:0 auto;}

#nav {

width:960px;

height:35px;

background:#ccc;

margin:0 auto;

margin-top:40px;

}

#nav ul{list-style:none;width:960px;height:35px;}

#nav ul li{float:left;line-height:35px;text-align:center;font-family:微软雅黑;margin:0px 5px;}

#nav ul li a{display:block;font-size:16px;color;#333;text-decoration:none;padding:0px 5px;}

#nav ul li a:hover{color:#fff;background:#000;}	

	#nav ul li a.first{margin-left:20px}	

</style>

</head>

<body>

<center>

<div id="nav">

<ul>

<li><a class="first" href="#">首页</a></li>

<li><a href="http://www.csdn.net/">极客学院</a></li>

<li><a href="http://www.csdn.net/">CSDN博客</a></li>

<li><a href="http://www.csdn.net/">51CTO</a></li>

<li><a href="https://github.com/">GitHub</a></li>

<li><a href="http://www.csdn.net/">北大青鸟</a></li>

<li><a href="http://www.csdn.net/">黑客联盟</a></li>

</ul>

</div>

</center>

</body>

</html>

#2

这么快就搞定了，大神啊
标签：

相关文章