li元素之間的邊界線

Question

我的導航欄中出現了我的塊li元素之間出現的奇怪雙邊線。即有一個塊li元素，然後在另一個元素開始之前有一個小間隙，這會產生這種雙線效應。我怎樣才能得到單行？這裏是我的代碼：

<div id="container"> 
    <div id="header"> 
     <h1> 
      <!--<a href="#"><img src="tracylogo7.jpg" alt="Millington and Hope" /></a> --> 
      <a href="#"><img src="tracylogo5_header.jpg" alt="Millington and Hope" /></a> 
     </h1> 
     <h2> 
      <!--<a href="#"><img src="tracylogo5_header.jpg" alt="Millington and Hope" /></a> --> 
     </h2> 
    </div> 
    <ul id="nav"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="stock.html">Stock</a></li> 
     <li><a href="events.html">Events</a></li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul> 
    <div id="box"> 
      <a href="#"><img src="home4.jpg" alt="Slideshow Image 1" /></a> 

      <a href="#"><img src="home4.jpg" alt="Slideshow Image 2" /></a> 

      <a href="#"><img src="home4.jpg" alt="Slideshow Image 3" /></a> 
    </div> 
    <div id="footer"> 
     <p class="client">Tel: 07448740&nbsp;&nbsp;&nbsp;&nbsp;E-mail: tjdelane@hotmail.co.uk</p> 

    </div> 
</div> 

html,body 
{ 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

body 
{ 
    background:rgb(171,163,144); 
    text-align: center; 
    min-width: 600px; 
} 

#container 
{ 
    margin:0 auto; 
    background:rgb(171, 163, 144); 
    width:80%; 
} 

#nav 
{ 
    border:1px solid #ccc; 
    border-width:1px 0; 
    list-style:none; 
    margin:0; 
    padding:0; 
    text-align:center; 
    /*background:rgb(161,153,134) /* for non-css3 browsers */ 
    background: -webkit-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144)); 
    background: -moz-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144)); 

} 

#nav li 
{ 
    display:inline; 
}  

#nav a 
{ 
    display:inline-block; 
    border-left: 1px solid #ccc; 
    border-right: 1px solid #ccc; 
    padding:10px 20px 10px 20px; 
    text-decoration:none; 
    color:white; 
} 

#nav a:hover 
{ 
    background:rgb(171, 163, 144); 
} 

Answer 1

這些空格是由新行中的<li>標籤分隔引起的秒。添加評論。

Answer 2

如果您從你的CSS以下行（在#nav一）

border-right: 1px solid #ccc; 

，並把它放在一個新的聲明中：

#nav li:last-child a { 
    border-right: 1px solid #ccc; 
}