为了实现上面这个效果，完整版代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> ???<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????.nav{ ???????????width: 960px; ???????????height: 50px; ???????????border: 1px solid red; ???????????margin: 100px auto; ???????} ???????.nav ul{ ???????????/*去掉小圆点*/ ???????????list-style: none; ???????} ???????.nav ul li{ ???????????float: left; ???????????width: 120px; ???????????height: 50px; ???????????/*让内容水平居中*/ ???????????text-align: center; ???????????/*让行高等于nav的高度，就可以保证内容垂直居中*/ ???????????line-height: 50px; ???????} ???????.nav ul li a{ ???????????display: block; ???????????width: 120px; ???????????height: 50px; ???????} ???????/*两个伪类的属性，可以用逗号隔开*/ ???????.nav ul li a:link , .nav ul li a:visited{ ???????????text-decoration: none; ???????????background-color: purple; ???????????color:white; ???????} ???????.nav ul li a:hover{ ???????????background-color: orange; ???????} ???</style></head><body> ???<div class="nav"> ???????<ul> ???????????<li><a href="#">网站栏目</a></li> ???????????<li><a href="#">网站栏目</a></li> ???????????<li><a href="#">网站栏目</a></li> ???????????<li><a href="#">网站栏目</a></li> ???????????<li><a href="#">网站栏目</a></li> ???????????<li><a href="#">网站栏目</a></li> ???????????<li><a href="#">网站栏目</a></li> ???????????<li><a href="#">网站栏目</a></li> ???????</ul> ???</div></body></html>1.div默认宽度全屏，高度自适应（根据里面内容的高度），如果定义了div高度，里面内容的高度大于这个高度，就会出现超出边界的情况
比如上例中，如果把li的float属性去掉，会出现超出边界的情况
2.float属性的元素，肯定不会超过包含块的内边距（保持在包含块padding留白以内）（不仅是左右，上下也一样）,上例中，不把li的float属性去掉，把li的高度无论设置成多少，都不会绘制到nav之外
3.list-style: none;属性去掉li的默认原点
网站头部导航
原文地址：https://www.cnblogs.com/cowboybusy/p/9096413.html