1

我正在尝试在同一文本中添加两个不同颜色的下划线，但无法设置第二个下划线，它从第一行下降。

这是链接示例“单击此处以查看示例”，请检查此页面标题的下划线 其他会议,教会服务。

.zaptitle {
    margin-bottom:20px !important;
} 

.home_widget .page_title_s2, .home_widget .page_title_s3, .home_widget .page_title_s4, 
.page_title_testimonials, .zaptitle {
    border-bottom-color:#EDEDED;
    border-bottom-style:solid;
    border-bottom-width:1px;
    color:#545454;
    float:left;
    font-family:Arial, sans-serif;
    font-size:16px;
    font-weight:bold;
    margin:0 0 20px;
    min-height:30px;
    padding:0;
    position:relative;
    width:100%;
}

和

<div class="zaptitle page_title_s2 ">
    <span class="page_info_title_s2" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(16, 185, 185);">Latest News</span>
</div>
4

3 回答 3

0

你只需要添加这个类

.page_info_title_s2{
    display:block;
    float:left;
    min-height:30px;
}

这是工作小提琴

于 2013-09-25T11:05:00.253 回答
0

CSS 的美妙之处在于，事情并不一定要像看起来那样。您可以使用其他元素创建这样的线。

JSfiddle

HTML：

<div id="hello">hello</div>
<div id="left_line"></div>
<div id="right_line"></div>

CSS：

#left_line {
    background-color:black;
    margin-right:90%;
    float:left;
    width:10%;
    height:1px;
}
#right_line {
    background-color:red;
    float:right;
    width:80%;
    height:1px;
    position:absolute;
    left:10%;
}
于 2013-09-25T11:08:06.243 回答
0

请在您现有的 CSS 中添加以下代码：--

.page_info_title_s2{
 position: relative;
 float: left;
 padding-bottom: 10px;
 line-height: 20px;
 top: 1px;
 vertical-align: baseline;
 }

使用上面的代码来精确的行覆盖。请参阅工作小提琴：-

http://jsfiddle.net/npsingh/RgE2h/1/

于 2013-09-25T11:26:43.083 回答