1

ナビゲーションバーのブロックli要素の間に奇妙な二重境界線が表示されます。つまり、ブロックli要素があり、他の要素が開始する前に小さなギャップがあります。これにより、この種の二重線効果が作成されます。どうすれば1行だけを取得できますか？これが私のコードです：

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

2 に答える 2

6

cssから次の行を削除した場合（#nav a）

border-right: 1px solid #ccc;

そしてそれを新しい宣言の中に置きます：

#nav li:last-child a { 
   border-right: 1px solid #ccc;
}
于 2012-07-24T14:55:00.380 に答える
2

<li>これらの空白は、タグを新しい行で区切ることによって発生します。コメントを追加します。

于 2012-07-24T14:56:15.917 に答える