文章内容浅显，适合初学者，老师傅就不要浪费时间看了-QAQ-
1 直接用键盘上的字符来做
因为这种做法常常用来做头部的导航栏，所以起个类名nav的盒子，下面是html结构ul+li 里面放a链接，a链接后面直接加竖线。
<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>下面是css样式，给nav加宽度和高度，文字垂直居中，加个背景颜色，然后让 li 浮动，给 li 里面的a加左右padding，把a转换为行内块，这样就会增加a的范围，用来增加用户体验，这个做的好处就是简单，如果某一个竖线不要，直接在html中去掉就行了。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nav {
width: 700px;
height: 30px;
line-height: 30px;
margin: 200px auto;
background-color: #eeeeee;
}
.nav ul li {
float: left;
list-style: none;
}
.nav ul li a {
display: inline-block;
/* 让竖线和文字对齐 */
vertical-align: middle;
padding: 0 20px;
text-decoration: none;
color: #333333;
}
.nav ul li a:hover {
color: red
}下面是效果图
2 插入标签来做
把插入的标签width设为1px，height自行调整，当然插入的标签得是行内块，或者转换为行内块，因为我们做导航栏都是用 ul 和 li 做的，所以最简单的就是把竖线用 li来做，用结构伪类选择器，选择奇数或者偶数的 li，把width设为1px，再给这个li设置margin-top和左右的margin值就行了。
html
<div class="nav">
<ul>
<li><a href="##">热门</a></li>
<li></li>
<li><a href="##">大家电</a></li>
<li></li>
<li><a href="##">生活电器</a></li>
<li></li>
<li><a href="##">厨房电器</a></li>
<li></li>
<li><a href="##">个护健康</a></li>
<li></li>
<li><a href="##">应季电器</a></li>
</ul>
</div>css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nav {
width: 700px;
height: 30px;
line-height: 30px;
margin: 200px auto;
background-color: #eeeeee;
}
.nav ul li {
float: left;
list-style: none;
}
.nav ul li a {
text-decoration: none;
color: #333333;
}
/* 选择偶数的li*/
.nav ul li:nth-child(2n) {
width: 1px;
height: 12px;
background-color: #333333;
margin: 10px 20px;
} 效果图
3 用 li 的左或者右边框
给 li 左右的padding 然后来个右边框就好了
html
<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>css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nav {
width: 700px;
height: 30px;
line-height: 30px;
margin: 200px auto;
background-color: #eeeeee;
}
.nav ul li a {
text-decoration: none;
color: #333333;
}
/* 这里要给li 加高度，行高也要和高度一样 */
.nav ul li {
float: left;
list-style: none;
margin-top: 10px;
padding: 0 20px;
height: 13px;
line-height: 13px;
border-right: 1px solid #333333; }
/*去掉最后一个 li 的边框 */
.nav ul li:last-child{
border:0
} 效果图
4 用 伪元素做
其实伪元素来做和插入标签的原理是一样的，就是细节上有点差别，而且好处是不会增加html的结构，毕竟结构越简单越好。
html
<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>css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nav {
width: 700px;
height: 30px;
line-height: 30px;
margin: 200px auto;
background-color: #eeeeee;
}
.nav ul li a {
text-decoration: none;
color: #333333;
}
.nav ul li {
float: left;
list-style: none;
}
/* 这里用after伪元素，把它转换成行内块，给左右外边距 */
.nav ul li::after {
content: '';
display: inline-block;
width: 1px;
height: 13px;
margin: 0 20px;
background-color: #333;
}
/* 同理，去掉最后一个竖线，这里先结构伪类选择器，再伪元素，顺序不要错了 */
.nav ul li:last-child::after {
width: 0;
}效果图
总结：
做这个效果其实方法也有很多，比如可以用定位来做，不过这几种算是比较简单的了，我也是前段初学者，这篇文章内容也比较浅显，适合比我还新的新手，不喜勿喷。
