如何从导航栏和线条中删除“间隙”？答案

【问题标题】：How to remove "gap" from nav bar and line?如何从导航栏和线条中删除“间隙”？
【发布时间】：2013-12-28 07:40:21
【问题描述】：

能否请您告诉我如何消除红线和导航栏之间的白色间隙。 CSS：

    /* Main */
     #menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;  
background: #111;
background: -moz-linear-gradient(#444, #111); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  
background: -webkit-linear-gradient(#444, #111);    
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;

      }

     #menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
     }

     #menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
    }

     #menu li:hover > a{
color: #fafafa;
    }

    *html #menu li a:hover{ /* IE6 */
color: #fafafa;
    }

     #menu li:hover > ul{
display: block;
    }

    /* Sub-menu */

     #menu ul{
    list-style: none;
    margin: 0;
     padding: 0;    
     display: none;
       position: absolute;
top: 35px;
left: 0;
z-index: 99999;    
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);    
background: -o-linear-gradient(#444, #111); 
background: -ms-linear-gradient(#444, #111);    
background: linear-gradient(#444, #111);    
-moz-border-radius: 5px;
border-radius: 5px;
   }

  #menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;  
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
      }

   #menu ul li:last-child{   
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;    
    }

   #menu ul a{    
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
  }

  *html #menu ul a{ /* IE6 */   
height: 10px;
width: 150px;
      }

    *:first-child+html #menu ul a{ /* IE7 */    
height: 10px;
width: 150px;
    }

     #menu ul a:hover{
    background: #0186ba;
background: -moz-linear-gradient(#04acec,  #0186ba);    
background: -webkit-gradient(linear, left top, left bottom, from(#04acec),           to(#0186ba));
background: -webkit-linear-gradient(#04acec,  #0186ba);
background: -o-linear-gradient(#04acec,  #0186ba);
background: -ms-linear-gradient(#04acec,  #0186ba);
background: linear-gradient(#04acec,  #0186ba);
      }

      #menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
     }

    #menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
 }

  #menu ul li:first-child a:hover:after{
border-bottom-color: #04acec; 
}

  #menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
  }

     /* Clear floated elements */
    #menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
    }

    * html #menu             { zoom: 1; } /* IE6 */
    *:first-child+html #menu { zoom: 1; } /* IE7 */

     .navbar { margin-bottom: 0; }

HTML：

 <head>
<title> Welcome to the home page </title>
  <link rel="stylesheet" href="css.css">
  </head>

 <body>
 <hr size="50px" color=red>
 <ul id="menu">
<li><a href="#">Home</a></li>
<li>
    <a href="#">Categories</a>
    <ul>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Graphic design</a></li>
        <li><a href="#">Development tools</a></li>
        <li><a href="#">Web design</a></li>
    </ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
    </ul>

   </div>
  </body>

  </html>

问题

http://i.stack.imgur.com/Qa10j.png

我已经在 CSS 的底部添加了代码，但这似乎没有太大的区别

【问题讨论】：

小提琴比截图更有帮助。

标签： html css

【解决方案1】：

使用 CSS，有很多选择。
你可以试试

hr { 
 margin-botton: 0;
}

或者，您可以在菜单中添加一些内边距，并为其添加上边框，而不是使用 hr。调整大小并添加填充以获得所需的效果。

#menu {
 border-top: 1px solid red;
}

【讨论】：

【解决方案2】：

hr 在顶部和底部有 8px 的边距。去掉下边距。

【讨论】：