Rumah >hujung hadapan web >html tutorial >div+css样式表制作导航怎么使其紧凑排列_html/css_WEB-ITnose
div+css样式表制作导航怎么使其紧凑排列_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:44:441334semak imbas
代码如下：
结果为：
中间空隙很大怎么办？而且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> 这么快就搞定了，大神啊
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML列表标签_html/css_WEB-ITnoseArtikel seterusnya：Agile国人出品HTML5+CSS3+JS移动应用开发框架_html/css_WEB-ITnose