减少两个<hr />标签之间的空白差距

Question

我有以下菜单

两行都是'hr'标签，菜单是包含ul的div。我已经谷歌搜索了一段时间，并试图用边距和填充调整CSS，但我想减少行和文本之间的空白，使他们更接近文本。

HTML：

<hr id="header_line"/>
<div id="menu_bar">
    <ul>
        <li><a href="#">Add new Form</a></li>
        <li><a href="#">View old forms</a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Site Administration</a></li>
    </ul>
</div>
<hr id="under_menu_line"/>

CSS：

#menu_bar ul {
    list-style:none;
    padding-left:0px;
}

#menu_bar ul li {
    display:inline;
    padding-left:10px;
}

#menu_bar ul li a {
    text-decoration:none;
    color:Black;
    font-family:Century Gothic;
    font-size:12pt;
}

#menu_bar ul li a:hover {
    color:#007C5A;
}

#header_line {
    margin-top:5px;
}

#under_menu_line {
    margin-top:5px;
}

有什么想法吗？

Answer 1

最佳解决方案是放弃<hr>，并在div上使用border-top和border-bottom以及padding。

<hr>应该用作横向规则。例如，段落的硬分离或长时间的休息。而不是视觉元素。

Answer 2

与任何其他元素一样，<hr>由CSS控制。您想要控制的空间只是边距。这是Firefox的默认设置：

hr {
    -moz-box-sizing: border-box;
    -moz-float-edge: margin-box;
    border: 1px inset;
    color: gray;
    display: block;
    height: 2px;
    margin: 0.5em auto;
}

因此，以下将使空间为0.1em而不是0.5em：

hr { margin: 0.1em auto; }

Answer 3

试试这个并告诉我这是不是你想要的。

#header_line { margin-top:5px; margin-bottom:-10px;} 
#under_menu_line { margin-top:-10px; }

Answer 4

使用

#header_line{
    margin-bottom:0px;
}

#under_menu_line{
    margin-top:0px;
}