圍繞標題css的2條水平線

使用下面的代碼使水平線圍繞我的標題。但有人能幫我做兩行嗎？ http://jsfiddle.net/7jGHS/圍繞標題css的2條水平線

<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; }

來源

2014-04-30 nick

你的意思是雙行而不是單行？ – Richa

只需添加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; 
}

來源

2014-04-30 06:01:09 Fizzix

只需添加

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; 
}

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; 
}

來源

2014-04-30 06:02:24 Richa

添加

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

來源

2014-04-30 06:03:16

只需添加邊框頂部：1px的固體＃000;到H2標籤

來源

2014-04-30 06:03:30 user3091574

我已經更新了你的提琴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; }

來源

2014-04-30 06:09:42 Tuhin

總有使用的背景圖像周邊的標題行的選項。與上面的回答相同，加入： background-image:url(image.png) 均爲h1和h1 span造型。

來源

2014-06-03 08:14:33 Livshin

圍繞標題css的2條水平線

回答

相關問題