Question

我使用下面的代码在我的标题周围做一个水平线。但有人可以帮助我做两行吗？ http://jsfiddle.net/7jGHS/

<h2><span>THIS IS A TEST</span></h2>

h2 { width:100%; text-align:center; border-bottom: 1px solid #000; line-height:0.1em; margin:10px 0 20px; } 
h2 span { background:#fff; padding:0 10px; }

Answer 1

只需将border-top: 1px solid #000;添加到h2即可。这样，它会在h2旁边有两条完美的中心线。使用border-bottom-style:double;会使它们偏离中心，更多地朝向元素的底部看起来非常不均匀。

FIDDLE DEMO HERE

FULL SCREEN DEMO HERE

更新了CSS：

h2 {
    width:100%;
    text-align:center;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    line-height:0.1em;
    margin:10px 0 20px;
}
h2 span {
    background:#fff;
    padding:0 10px;
}

Answer 2

简单地添加

border-bottom-style:double;

以下是代码和 Demo

h2 {
    width:100%;
    text-align:center;
    border-bottom-style:double;
    line-height:0.1em;
    margin:10px 0 20px;
    border:1px solid #000;
}
h2 span {
    background:#fff;
    padding:0 10px;
}

<强> OR

border-bottom: 1px solid #000;
    border-top: 1px solid #000;

以下是代码和 DEMO

h2 {
    width:100%;
    text-align:center;
   border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    line-height:0.1em;
    margin:10px 0 20px;

}
h2 span {
    background:#fff;
    padding:0 10px;
}

Answer 3

添加

border-top: 1px solid #000;

到css中的h2标签

h2 { 
     width:100%; 
     text-align:center;
     border-bottom: 1px solid #000; 
     line-height:0.1em; 
     margin:10px 0 20px; 
     border-top: 1px solid #000; //added only this line
    }

FIDDLE DEMO

Answer 4

只需将 border-top：1px solid＃000; 添加到h2标记

Answer 5

我更新了你的小提琴Check Here

    h2 { width:100%; 
text-align:center; 
border-bottom: 1px solid #000; 
border-top: 1px solid #000;
line-height:0.1em;
 margin:10px 0 20px; } 
    h2 span { background:#fff; 
padding:0 10px; }

Answer 6

始终可以选择将背景图像用于标题周围的线条。与上述答案相同，添加： background-image:url(image.png) 同时具有h1和h1 span样式。

标题css周围有2条水平线

6 个答案: