Question

所以当我在寻找hr标签的替代品时，我在this question找到了答案，这样我就可以在hr中间输入一些文字。它的工作和看起来很棒，但有一个问题（值得我相信它自己的问题）。分隔符下方的任何内容都会被跨度的背景颜色剪切并隐藏。

<div style="height: 2px; background-color: #006600; text-align: center;">
    <span style="padding: 0px 3px; background-color: white; position: relative; top: -0.6em;">Horizontal Separator</span>
</div>
<div>Stuff that can be hidden by the span!Stuff that can be hidden by the span!</div>

http://jsfiddle.net/xZn6c/

我需要做些什么才能在跨度和之后的任何内容之间完全没有重叠？我已经尝试将分隔符包装在另一个div中并使用清除，溢出等，但我无法想到的任何东西在实际上使其他div偏离了跨度的方式。我想用当前的分隔符做什么，或者我需要改变它？

Answer 1

您应该只能在包含范围的div中添加margin-bottom。

<div style="height: 2px; margin-bottom:0.6em; background-color: #006600; text-align: center;">
    <span style="padding: 0px 3px; background-color: white; position: relative; top: -0.6em;">Horizontal Separator</span>
</div>
<div>Stuff that can be hidden by the span!Stuff that can be hidden by the span!</div>

Answer 2

试试这个：

<div style='margin-top:10px'>Stuff that can be hidden by the span!Stuff that can be hidden by the span!</div>

Answer 3

只需在div样式中添加填充。看起来padding:5px会照顾它。

<div style="padding:10px;height: 2px; background-color: #006600; text-align: center;">
   <span style="padding: 0px 3px; background-color: white; position: relative; top: -0.6em;">Horizontal Separator</span>
</div>
<div>Stuff that can be hidden by the span!Stuff that can be hidden by the span!</div>

如何清除固定高度div和内跨？

3 个答案: