html - 减少两个之间的白色间隙标签

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-topand 。border-bottompadding

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