怎么写横向导航用css
1、第一步，新建html页面
在html编辑器软件内，新建html页面，（一般我们常使用的两款编辑器是HBuilder和Adobe Dreamweaver，这里我使用的软件是HBuilder）。如图：
2、第二步，添加导航的标签
在<body></body>添加<div class="nav"></div>,于<div class="nav"></div>中间添加<ul></ul>,在<ul>内添加<li>标签，<li>内同时添加<a>标签，方便连接导航跳转。如图：
3、第三步，添加导航内容
在新建的<a></a>内，添加横向导航要显示的内容。如图：
4、第四步，创建样式标签
在<title></title>下方添加一个<style type="text/css"></style>
5、第五步，创建横向导航的样式代码
在<style>标签里添加一个样式类为：.nav宽度为1200像素，在整个页面左右居中；.nav ul li清除掉li的自带样式，li的每个宽度为180像素，li左浮动，实现横向导航样式，背景为红色，高度为30像素，为了上下居中，行高应与li高度一致，文字左右居中；a标签去掉下划线，给字体颜色为白色。
样式代码为：
.nav{ width: 1200px; margin-left: auto; margin-right: auto;}
.nav ul li{
list-style: none;
width:180px;
float: left;
height: 30px;
line-height: 30px;
background: red;
text-align: center;
}
.nav ul li a {
text-decoration: none;
color: #fff;
}
如图：
6、第六步，效果预览
源文件html保存后，使用浏览器打开预览效果。如图：
7、所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>横向导航</title>
<style type="text/css">
.nav {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.nav ul li {
list-style: none;
width: 180px;
float: left;
height: 30px;
line-height: 30px;
background: red;
text-align: center;
}
.nav ul li a {
text-decoration: none;
color: #fff;
}
</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>
</ul>
</div>
</body>
</html>