如何将左边框添加到导航菜单

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/