我們想要的效果：

通常我們?yōu)橐粋€菜單設(shè)置分隔線的時候，會想到用 border-right 或者border-left 來實現(xiàn)：

border-right:1px solid gray;

不過這種方法制作的分隔線，我們可以改變它的線寬、線型、顏色，卻沒法改變它的長度。這時候我們可以想到另一個方法：

Background-image和Gradient 制作菜單分隔豎線。

首先，看看它的HTML結(jié)構(gòu)：

<div class="one">
  <a href="#">Home</a>
  <a href="#">Hello</a>
  <a href="#">Hello</a>
  <a href="#">Hello</a>
</div>

先給它添加基本的CSS樣式:

font-size:24px;
color:#8ce;
text-decoration:none;
padding:0 20px;

到這里我們再給它添加一個背景色，就能發(fā)現(xiàn)，<a>元素之間存在間隔。

background: #fce;

*在我們接著往下繪制線條的時候，先要解決這個問題，首先，為什么會有空格呢？
原因就是標(biāo)簽段之間的空格，那么怎么解決這個問題呢？
1. 去掉HTML中的空格，自然間距就沒有了。

<div class="one">
  <a href="#">
Home</a><a href="#">
Hello</a><a href="#">
Hello</a><a href="#">
Hello</a>
</div>

2. margin負(fù)值
margin負(fù)值的大小與上下文的字體和文字大小相關(guān)，由于外部環(huán)境的不確定性，以及最后一個元素多出的父margin值等問題，這個方法不適合大規(guī)模使用。
在本利中設(shè)置的是：margin:-4px;

3. 去掉閉合標(biāo)簽
為了向下兼容IE6/IE7等喝蒙牛長大的瀏覽器，最后一個列表的標(biāo)簽的結(jié)束（閉合）標(biāo)簽不能丟。

<div class="one">
  <a href="#">Home
  <a href="#">Hello
  <a href="#">Hello
  <a href="#">Hello</a>
</div>

在HTML5中，我們可以直接：

<div class="one">
  <a href="#">Home
  <a href="#">Hello
  <a href="#">Hello
  <a href="#">Hello
</div>

4. 為父元素添加 font-size:0；如下

.one {
    font-size:0;
}
.one a {
    font-size:24px;
}

5. 使用letter-spacing

.one {
    letter-spacing:-4px;   /*這個數(shù)值在本例中是最合適的*/
}
.one a {
    letter-spacing:0;
}

6. 使用word-spacing

.one {
    word-spacing:-4px;
}
.one a {
    word-spacing:0;
}

解決了空格的問題之后，我們就可以用 Gradient 為元素添加背景圖片了，而這個寬度只有1px 的線條就是我們的分隔線了。

.one {
  font-size:0
}
.one a{
  color:#8ce;
  text-decoration:none;
  font-size:24px;
  padding:0 20px;
  background:linear-gradient(gray,gray) no-repeat;
  background-size:1px 40%;  /*制定了線寬為 1px；線高為背景高度的40%；*/
  background-position:0 center;  /*線條所在位置為垂直居中*/
}

此時我們發(fā)現(xiàn)，第一個菜單的前面也有一根線，我們需要把它去掉，利用 first-child 選擇器選中它，把它的背景去掉，就好了：

.one>a:first-child{
  background:none;
}

這樣，終于可以得到想要的效果了：