如何给导航菜单添加左边框

Question

我想在菜单左边显示一个边框。我尝试给菜单添加另一个边框，但这并不像我期望的那样工作。

我希望它能像这张图片中展示的那样。我应该将边框作为列表中的图像添加还是调整边框属性？如果我添加一个边框，它会覆盖导航区域的整个高度。 这是链接http://codepen.io/anon/pen/EanAx/。请帮忙。

- ləːnə

Answer 1

你可以直接使用 | 符号代替 border，然后在每个菜单项前应用伪类，如下所示：

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

更新了Codepen示例

。

- Tanner

---

边框效果很好。但是当我将鼠标悬停在菜单上时，边框也被包含在内了。你能看到吗？ - ləːnə

Answer 2

这应该会有所帮助 -

ul { 
list-style:none;
}

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

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

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

基本上...正在做的是，在每个li之前添加内容，除了第一个。

- Neil

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;
}

- Magicianred

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;
}

你可以为图像设置宽度和高度。

- Deepika

Answer 5

边框应仅以样式形式给出。您可以尝试在具有“line-height”属性的 <div> 上给出边框。

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*/  
}

在你的代码中添加 [border-left: 1px solid; & 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;
}

希望这是你正在寻找的！

- Sagar Awasthi

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/

- Akshay Mohite