Question

我有一个带有底部边框的相当简单的导航栏，但我想将它封闭在两侧 - 但不是顶部。所以我得到一个| ______________ |围绕我的所有链接，但我刚刚开始，无论我尝试什么似乎都边界我想要的每一个链接。

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

在这里摆弄

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

导航栏的边框边框

3 个答案: