Community

Learn

Tools Library

AI Tools

Leisure

English

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

WBOY

Release： 2016-06-24 11:44:44

Original

1361 people have browsed it

代码如下：

导航条

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;}

首页

极客学院

CSDN博客

51CTO

GitHub

北大青鸟

黑客联盟

结果为：
中间空隙很大怎么办？而且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>

Copy after login

这么快就搞定了，大神啊

Related labels：

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

source：php.cn

Previous article：HTML list tag_html/css_WEB-ITnose Next article：Agile Chinese produces HTML5 CSS3 JS mobile application development framework_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn