CSSの位置：絶対的な問題

Question

私はいくつかのCSSの問題があります。ここに私が必要なものがあります。

どんなに多くの単語のタイトルがあります。それは常にバックグラウンドラインが全体のdivを通過していて、言葉の背景がある

（たとえばタイトルは、What's new today?可能性がありhello worldすることができます）白。 http://jsfiddle.net/zApLA/でも

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

があってもよいラインの代わりにbackground-imageを使用することができます。

は、ここに私のコードです（単語はtext-align:center;であるべきで、破線のように見えることが背景です）。ありがとう。

Answer 1

（フィドルで働いていた）このコードを試してみてください。 Fiddle here。

Answer 2

あなたのCSSに関するいくつかの問題。

1つ - .wd divはページ全体の幅になります（デフォルトは100％）。 2つのZ-インデックスがありません。どのdivを上に置くべきかを指定します。

は、これは単にその行のテキストとラインののborder-bottom、および位置決め要素と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; 
}