css职位：绝对问题

Question

我有一些CSS问题。这就是我需要的。

无论标题有多少字（例如：标题可以是What's new today?，都可以是hello world）

它总是有一个背景线穿过整个div，而单词的背景是白色的。 （这个词应该是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

这可以通过简单地使用带边框底部的div和行的文本来定位元素来实现。 Fiddle here

Answer 2

您的CSS存在一些问题。

One - .wd div跨越整个页面宽度（默认为100％） 两个 - 没有z-index sset来说明哪个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;
}