减少两个<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>s,并在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; }