1、首先先定义html，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>横向导航栏</title>
</head>
<body>
<div class="container">
<ul class="tab_nav">
<li class="tab_item">导航A</li>
<li class="tab_item">导航B</li>
<li class="tab_item">导航C</li>
<li class="tab_item">导航D</li>
</ul>
</div>
</body>
</html>
写完如图所示
2、那么横向怎么弄呢，一般简单用float即可，看代码
.tab_item{
float: left;
padding: 5px;
border:1px solid #CCCCCC;
margin-left: -1px;
}
3、这时候一个横向的导航栏就写好了
全部代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>横向导航栏</title>
<style>
.tab_item{
float: left;
padding: 5px;
border:1px solid #CCCCCC;
margin-left: -1px;
}
</style>
</head>
<body>
<div class="container">
<div class="tab_nav">
<div class="tab_item">导航A</div>
<div class="tab_item">导航B</div>
<div class="tab_item">导航C</div>
<div class="tab_item">导航D</div>
</div>
</div>
</body>
</html>