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

如果从css中删除以下行（在#nav a中）

border-right: 1px solid #ccc;

并将其放在新的声明中：

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

Answer 2

这些空格是由新行中的<li>标记分隔造成的。添加评论。

li元素之间的边界线

2 个答案: