Question

我想把我的文字放在水平线上。我希望如果文本长度增加，则应根据文本长度调整行。这在IE7,8，Mozilla上工作正常。我想让它适用于谷歌浏览器。

除谷歌Chrome外，它的工作正常。这是我的代码：

/*CSS*/
.pageHD{ font-size:30px; color:#369; font-weight:bold; padding:20px 0} .pageHD p{display:block; margin-right:10px}
.title-line{ height:1px; border:0 none; background:#e5e5e5; position: relative; right:0; top:0px} 
<!--HTML-->  
<div class="pageHD"><p class="left">Zones Showcases</p> <hr class="title-line" /></div>

任何人都可以帮助我。谢谢！

Answer 1

以下是我对您提问的理解：

您希望文本与hr元素重叠。

如果我没有弄清楚你的问题，那么这就是我的答案。

只需在小时后制作一个内容，这样它就会与hr重叠。

您的新HTML将是：

<div class="pageHD"><hr class="title-line" /></div>

你的新CSS将是：

.pageHD {
    font-size:30px;
    color:#369;
    font-weight:bold;
    padding:20px 0
}
.pageHD p {
    display:block;
    margin-right:10px
}
.title-line{
    height:1px;
    border:0 none;
    background:#e5e5e5;
    position: relative;
    right:0;
    top:0px;
    z-index: 0;
}
.title-line:after {
    position: absolute;
    content: 'Zone Showcases';
    bottom: -15px;
    z-index: 1;
}

这是一个jsFiddle示例：jsFiddle Example

Answer 2

这将解决您的问题

border-bottom:1px solid #e5e5e5;

选中此fiddle

使文本重叠为1px水平线

2 个答案: