如何將左邊框添加到導航菜單

Question

我想在菜單的左側顯示邊框。我嘗試在菜單中添加另一個邊框，但這不起作用。

我希望它顯示爲這個形象。我應該將邊框添加爲列表中的圖像還是調整邊框屬性？如果我添加邊框，它將覆蓋導航區域的整個高度。 這是鏈接http://codepen.io/anon/pen/EanAx/。請幫助。

Answer 1

你可以只使用管道字符代替border和像這樣每個菜單項前對僞類：

#nav > li a:before{ 
    content: "|";  
    padding-right: 20px; 
} 

更新Codepen sample

Answer 2

這應該是helpful-

ul { 
list-style:none; 
} 

ul li{ 
text-align:center; 
display:inline-block; 
} 

ul li:before { 
content: " | "; 
} 

ul li:first-child:before { 
content: none; 
} 

基本上..正在做什麼，每個李前添加內容，除了第一個。

Answer 3

我已經改變了這種風格的規則：

#nav > li > a { 
    color: #548ECD; 
    display: block; 
    font-size: 1.3em; 
    line-height: 49px; 
    padding: 0 15px; 
    text-transform: uppercase; 

    /* Add this code */ 
    height: 39px; 
    margin: 5px auto; 
    vertical-align: middle; 
    border-left: solid thin black; 
} 

Answer 4

這是另一種方法是通過使用圖像。

我們可以將我們想要和使用的尺寸設爲css的圖像作爲;

#menu a { 
    float: left; 
    background: url(../images/menu_line.jpg) no-repeat right; 
    padding:0 25px 0 24px; 
    color:#000000; 
    text-decoration:none; 
} 

您可以給圖像寬度，高度。

Answer 5

邊框應僅以樣式給出。你可以嘗試給邊境上「行高」特性，即

a{ 
    border-left: 1px solid; 
    line-height: 10px; 
} 

在實際的代碼替換

#nav > li { 
    border-bottom: 5px solid transparent; 
    <strike> border-left: 1px solid #aaa; </strike> 
    <strike> border-right: 1px solid #f3f3f3;</strike> 
    margin-bottom: -5px; 
    text-align: left; 
    -moz-transition: all 300ms ease-in-out 0s; 
    -ms-transition: all 300ms ease-in-out 0s; 
    -o-transition: all 300ms ease-in-out 0s; 
    -webkit-transition: all 300ms ease-in-out 0s; 
    transition: all 300ms ease-in-out 0s; 

    display:inline-block; 
    *display:inline; /*IE7*/ 
    *zoom:1; /*IE7*/ 
} 

與此

#nav > li { 
    border-bottom: 5px solid transparent; 
    padding:10px; 
    margin-bottom: -5px; 
    text-align: left; 
    -moz-transition: all 300ms ease-in-out 0s; 
    -ms-transition: all 300ms ease-in-out 0s; 
    -o-transition: all 300ms ease-in-out 0s; 
    -webkit-transition: all 300ms ease-in-out 0s; 
    transition: all 300ms ease-in-out 0s; 

    display:inline-block; 
    *display:inline; /*IE7*/ 
    *zoom:1; /*IE7*/ 
} 

，並添加[左邊框：1px的固體; & line-height：25px;]在你的代碼中的行。

#nav > li > a { 
    color: #548ECD; 
    display: block; 
    font-size: 1.3em; 
    border-left: 1px solid; 
    line-height: 25px; 
    padding: 0 15px; 
    text-transform: uppercase; 
} 

希望這是你在找什麼！

Answer 6

Another way to do this 

    <ul> 
     <li><a href="#">Menu1</a><span></span></li> 
     <li><a href="#">Menu2</a><span></span></li> 
     <li><a href="#">Menu3</a><span></span></li> 
     <li><a href="#">Menu4</a><span class="lastspan"></span></li> 
    </ul> 

    li{list-style:none; background:#eee; float:left} 
    li a{color: #548ECD; 
    display: block; 
    font-size: 1.3em; 
    line-height: 49px; 
    padding: 0 15px; 
    text-transform: uppercase; 
    float: left;} 

    li span{float: left; 
    margin: 18px 0 0 0; 
    height: 15px; 
    border-left: 1px solid #000;} 

    .lastspan {display:none} 

http://jsfiddle.net/f9NYP/