Home >Web Front-end >HTML Tutorial >How to make the navigation of div css style sheet compact and arranged_html/css_WEB-ITnose
How to make the navigation of div css style sheet compact and arranged_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:441362browse
代码如下：
acf251eef30dadcd95fda0b63932cc24
93f0f5c25f18dab9d176bd4f6de5d30e
efd2567c1fb77e16e60d87a2c199ee8e
b2386ffb911b14667cb8f0f91ea547a7导航条6e916e0f7d1e588d4f442bf645aedb2f
ef0d2420b1e5291570a81009eee48a1a
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;}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
bacbf9e1ad7f40415ce1670e31edfee3
e888e11df68261b4f4ab4534d0d06298
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6 fd36ec1cd3c8998a739fe1945b154f79首页5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f03c959589c67d71a4ee15662a0531d1极客学院5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f03c959589c67d71a4ee15662a0531d1CSDN博客5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f03c959589c67d71a4ee15662a0531d151CTO5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6349ff18f6b0ae5d6f6e08d115b706043GitHub5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f03c959589c67d71a4ee15662a0531d1北大青鸟5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f03c959589c67d71a4ee15662a0531d1黑客联盟5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
adca8a5fa06ffeafb062c2e3f274b930
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
结果为：
中间空隙很大怎么办？而且margin:0 auto;不能使div居中
回复讨论(解决方案)
<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> 这么快就搞定了，大神啊