此方法在可控性方面比較占優勢但是會增加一個豎線的節點
html部分：
<div class="top_page_l">
<ul>
<li><a href="#">小米商城</a><s>|</s></li>
<li><a href="#">MIUI</a><s>|</s></li>
<li><a href="#">LOT</a><s>|</s></li>
<li><a href="#">雲服務</a><s>|</s></li>
<li><a href="#">水滴</a><s>|</s></li>
<li><a href="#">金融</a><s>|</s></li>
<li><a href="#">有品</a><s>|</s></li>
<li><a href="#">政企服務</a><s>|</s></li>
<li><a href="#">select Region</a></li>
</ul>
</div>
CSS部分：
.top .top_page .top_page_l ul li{
float: left;
margin-right: 6px;//要計算好距離
}
.top .top_page .top_page_l ul li a{
display: inline-block;
margin-right: 6px;//計算好距離
}
方法二：
HTML：
<div>
<a href="">注冊</a>
<span class="fenge"></span>
<a href="">登錄</a>
</div>
CSS：
.fenge{
padding:12px 6px 0px 6px;
margin-left: 6px;
border-left: 1px solid #000;
font-size: 0;
}
利用border和padding ，這里使用padding主要是可以調控豎線的高度。實現可控性。優點：可控性高；缺點：多一個空白節點；
方法三（我一般不用 。因為ps不好）
HTML：
<div>
<a href="" class="reg_img">注冊</a>
<a href="">登錄</a>
</div>
CSS：
.reg_img{
background: url(../images/line.gif) no-repeat right;
padding-right: 6px;
display: block;
margin-right: 6px;
}
利用背景圖片；優點：可控性當然就是圖片的制作大小；缺點：要切圖；
以上。。。。