0

我想把我的文字放在水平线上。我想如果文本长度增加，应该根据文本长度调整行。这在 IE7、8、Mozilla 上运行良好。我想让它适用于谷歌浏览器。

除了谷歌浏览器外，它工作正常。这是我的代码：

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

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

4

2 回答 2

0

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

您想让文本与 hr 元素重叠。

如果我在理解您的问题时没有弄错，那么这就是我的答案。

只需在 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 示例

于 2013-08-07T15:04:54.000 回答
0

这将解决您的问题

border-bottom:1px solid #e5e5e5;

检查这个小提琴

于 2013-08-07T15:12:11.690 回答