文章目录
一、分析导航栏
二、如何操作
1、第一种情况（内容和“|”）
2、第二种情况（内容和边框）
总结
一、分析导航栏
类似这样的一个导航栏该如何编写？
由于只是编写导航栏的样式，因此不进行设置鼠标悬停上去的效果，不涉及<a>标签的使用
分析：这个导航栏可以利用ul li标签来进行编写，当然也可以选择div p标签等，但是为了方便起见，使用ul li是相对好一些的方式，也便于修改。
从图中可以看出这个导航栏可以被划分为4个部分，每一个部分可以被分为1、内容和“|” 2、内容和边框。
先分析第一种情况（内容和“|”）：a.内容和“|”,内容区域可以用ul li来包裹 ，而“|”可以用span标签来进行包裹。
b. 内容区域用ul li span标签包裹，“|”直接放在li标签中也可以。
第二种情况（内容和边框）：内容用ul li来包裹，而边框设置边框样式即可。
二、如何操作
1、第一种情况（内容和“|”）
a.内容和“|”,内容区域可以用ul li来包裹 ，而“|”可以用span标签来进行包裹。
html代码如下：
<ul>
<li>网站地图<span>|</span></li>
<li>联系我们 <span>|</span></li>
<li>关注关注<span>|</span></li>
<li>采购系统入口</li>
</ul>css代码如下：
*{
margin:0;
padding: 0;
}
ul{
width: 600px;
height: 50px;
background-color: yellow;
}
ul li{
list-style: none;
float: left;
background-color: pink;
line-height: 50px;
text-align: center;
}
ul li span{
padding:0 49px;
}浏览器显示的结果为：
这样写会出现，文字不能够居中显示，因此span包裹“|”不可取。
b. 内容区域用ul li span标签包裹，“|”直接放在li标签中也可以。
html代码如下：
<ul>
<li><span>网站地图</span>|</li>
<li><span>联系我们</span>|</li>
<li><span>关注关注</span>|</li>
<li><span>采购系统入口</span></li>
</ul>css代码如下：
*{
margin:0;
padding: 0;
}
ul{
list-style: none;
width: 597px;
height: 50px;
background-color: yellow;
}
ul li{
float:left;
}
ul li span{
display: inline-block;
background-color: pink;
line-height: 50px;
padding:0 37px;
}浏览器显示的结果为：
这种方式，可以让每一个内容中的文字居中显示，在css样式中span转换成了行内块元素，这是span是行内元素，不能够设置宽高，给它转为行内块元素就可以设置宽高了。
2、第二种情况（内容和边框）
html代码如下：
<ul>
<li><span>网站地图</span></li>
<li><span>网站地图</span></li>
<li><span>网站地图</span> </li>
<li><span class="span4">采购系统入口</span></li>
</ul>css代码如下：
*{
margin:0;
padding: 0;
}
ul{
list-style: none;
width: 596px;
height: 50px;
background-color: yellow;
}
ul li{
float:left;
height: 50px;
line-height: 50px;
}
ul li .span4{
border-right:0px;
}
ul li span{
padding:0 38px;
background-color: pink;
border-right:1px solid gray;
}浏览器效果如下：
这种方式可以让内容居中以及让边框大小与文字大小一致，也可取。
在css样式中，设置边框时，要注意对象是谁，是给span中设置边框，可以实现边框与文字一样大小，然后给li设置行高，可以实现文字垂直方向居中。如果给li设置边框，那么边框会占满整个高度的大小，出来的效果就不正确了 。
总结
可以利用内容区域用ul li span标签包裹，“|”直接放在li标签中或者内容+边框的方式来设置导航栏带有|的效果。
