css位置：絕對問題

Question

我有一些css問題。這是我需要的。

不管多少字標題有（例如：標題可能是What's new today?，可能是hello world）

它總是有一個背景線穿過整個格，字的背景是白色。 （這個詞應該是text-align:center;，它的背景看起來像斷行）

這裏是我的代碼：

<style> 
.ocell { 
width:960px; 
height:42px; 
text-align:center; 
padding: 20px 0 20px 0; 
} 
.wd { 
margin: 0 auto; 
background-col: white; 
margin-left: -10px; 
padding: 5px; 
} 
.line { 
position: absolute; 
border-bottom: solid 1px #999; 
margin-top:-18px; 
width: 960px; 
} 
</style> 
<div class="ocell"> 
<div class="wd">Title</div> 
<div class="line"></div> 
</div> 

也http://jsfiddle.net/zApLA/可能還可以使用background-image而不是線。謝謝。

Answer 1

這可以通過簡單地使用分度，下邊框爲線，並且定位元件與該行的文字來實現。 Fiddle here。

Answer 2

幾個問題與您的CSS。

One - .wd div跨越頁面的整個寬度（默認爲100％） Two - 沒有z-index sset表示哪個div應該位於哪個div上。

試試這個代碼（在撥弄工作）

.ocell { 
width:960px; 
height:42px; 
text-align:center; 
padding: 20px 0 20px 0; 
} 
.wd { 
margin: 0 auto; 
background-color: #f0f; 
margin-left: -10px; 
padding: 5px; 
font-size:20px; 
    z-index:10; 
    border:1px solid #f0f; 
    display:inline; 
} 
.line { 
position: absolute; 
border-bottom: solid 1px #999; 
margin-top:-15px; 
width: 960px; 
    z-index:-1; 
}