导航栏的边框

Question

我有一个带有底部边框的相当简单的导航栏，但我想将它的两边框起来 - 但不是顶部。所以我得到一个 |______________|围绕着我所有的 link，但我才刚刚开始，无论我尝试什么，似乎都与我不想要的每一个 link 接壤。

<nav>
    <div align="center">
    <div id="navigation">
    <ul>
       <li><a href="/">Home</a></li>
       <li><a href="/about">About</a></li>
       <li><a href="/products">Products</a></li>
       <li><a href="/news">News</a></li>
       <li><a href="/careers">Careers</a></li>
       <li><a href="contact us">Contact Us</a></li>
    </ul>
    </div><!--navigation-->
</nav>

和css

nav { 
  width: 100%;
  margin:0 auto;     
}
nav ul li {
  width: 16.6%;
  float: left;
  border-bottom: 1px solid #A2A2A2;
  list-style-type: none;
  display: inline;
}

nav ul li a {
  display: block;
  width: 100%;
  text-align: center;
  padding-top: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  color: #202020;
  font-family: "Myriad Pro Light";
  text-transform: uppercase;
  text-decoration: none;
  font-size: 12pt;
}
nav ul li a:hover {
  color:  #89ccca
}
nav ul{
  width: 80%;
  list-style: none;
  margin: 0;
  padding: 0;
 }

Answer 1

也许我可以帮你

试试这个

    nav ul li {
width: 16.0%;
float: left;
border-bottom: 1px solid #A2A2A2;
border-right: 1px solid #A2A2A2;
list-style-type: none;
display: inline;
}

nav ul li:first-child{border-left: 1px solid #A2A2A2;}

fiddle这里

http://jsfiddle.net/zfdxko8h/

Answer 2

尝试包括这个..

#navigation ul li:first-child { 
    border-left: 1px solid #A2A2A2;
}
#navigation ul li:last-child { 
    border-right: 1px solid #A2A2A2;
}

Here is The Fiddle

Answer 3

使用 first-child 和 last-child 属性并像下面那样应用它。

CSS

 nav ul li:first-child
 {
   border-left: 1px solid #A2A2A2; 
 }
 nav ul li:last-child
 {
   border-right: 1px solid #A2A2A2; 
 }

FIDDLE DEMO

导航栏的边框

Edge border for navigation bar

html

css

navigation

border