减少2个<hr>标签

之间的间隙白色我有以下菜单 menu 减少2个<hr>标签

这两条线都“小时”标签和菜单是包含UL一个div。我一直在使用Google搜索一下，试图用边距和填充来调整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; 
}

任何想法？

来源

2013-04-12 Silentbob

在问候我试了一下CSS我试着调整margin-top/bottom和所有3个元素的填充都是一样的 – Silentbob

你可以在'＃menu_bar'上放一个负值的顶部和底部'margin'，但这有点冒失。然而，马达拉的答案是更好的选择，因为它在语义上是正确的。 – ajp15243

最好的解决方案是删除<hr> s，并在div上使用border-top和border-bottom与padding一起使用。

<hr>应该用作水平线。例如，段落的分离或长时间的休息。而不是视觉元素。

来源

2013-04-12 14:19:32

谢谢我应该从一开始就这样做，谢谢你的建议。 – Silentbob

@ user2050577：不客气:) –

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

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

来源

2013-04-12 14:24:21

就像其他任何元素一样，<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; }

来源

2013-04-12 14:32:50

使用

#header_line{ 
    margin-bottom:0px; 
} 

#under_menu_line{ 
    margin-top:0px; 
}

来源

2016-06-06 13:33:03 Andrew

他为什么要用你的答案？请在您的回答中添加更多详细信息:-) – Jer

减少2个<hr>标签

回答

相关问题