如何清除固定高度的div和內部跨度？

所以我在this question的時候找到了一個答案，當時我正在尋找hr標籤的替代品，這將允許我在hr的中間輸入一些文本。它工作，看起來不錯，但有一個問題（值得我相信它自己的問題）。在分隔符下面的任何東西都會被跨度的背景顏色剪切和隱藏。如何清除固定高度的div和內部跨度？

<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脫離span的方式。我想用目前的分離器甚至可以做到這一點，還是我需要改變它？

來源

2011-03-11 Crag

你就應該能夠到下邊距添加到含跨度股利。

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

來源

2011-03-11 19:38:28

這個作品，我用餘量，而不是margin-bottom雖然，而em值而不是像素。我想我真的只是在想那麼簡單的事情。 – Crag 2011-03-11 19:49:18

@Crag我們都會這樣做:) – 2011-03-11 19:51:24

更新後的示例以符合@ subhaze的建議他是正確的0.6em將是最準確的值 – 2011-03-11 19:54:51

試試這個：

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

來源

2011-03-11 19:38:19 user470714

只需將填充添加到您的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>

來源

2011-03-11 19:39:02 s84

填充會導致div中的'line'增長，這是不期望的。保證金確實提供了我所需要的。 – Crag 2011-03-11 19:50:14

如何清除固定高度的div和內部跨度？

回答

相關問題