h1底部或頂部具有相同邊框的標題

我想爲小部件創建標題。該標題將具有相等或平行的底部邊界。它有可能如何？任何快速的想法。附加是我想要實現的。 enter image description here h1底部或頂部具有相同邊框的標題

第二個標題是我現在正在處理的標題。但我想看起來像第一節以上。

this is current

希望你明白，我找並聯邊境等於標題和擴展標題的寬度。」

謝謝鄉親！我得到了答案！我不是要使用範圍H1之後，因爲它只是增加了標籤，但「顯示：inline-block的;」似乎完美的我

來源

2015-01-07 Ebrahim Khalil

添加一個'浸軋bottom'和'邊境bottom' – fcalderan

jsfiddle

h1{ 
    font-size: 25px; 
    display: inline-block; 
    border-bottom: 1px solid black; 
    padding-bottom: 25px; 
    text-transform: uppercase; 
}

來源

2015-01-07 10:38:48 devqon

很大，其工作bcoz顯示：inline-block的 –

-1

試試這個http://jsfiddle.net/e4s8qo5q/

<h1>STATISTICS</h1> 

h1{ 
line-height:50px; 
border-bottom:1px solid; 
}

來源

2015-01-07 10:36:13 Akshay

-1

試試這個CSS：

h1{ 
border-bottom:3px solid black; 
padding-bottom: 5px; 
width:200px; 
}

來源

2015-01-07 10:37:45 vaspant

H1 { 
    display: inline-block; 
    border-bottom: 1px solid #000; 
    padding: 0 0 10px; 
    margin: 0; 
}

來源

2015-01-07 10:37:55

把它包在span。

h1 span { 
 
    text-transform: uppercase; 
 
    padding: 20px 0; 
 
    font-weight: 100; 
 
    border-bottom: 1px solid black; 
 
}

<h1><span>statistics</span></h1>

來源

2015-01-07 10:39:09

爲什麼呢？只需給'h1'元素一些'padding'來代替。 –

這很有效，因爲h1仍然佔據了整個寬度。 – devqon

h1底部或頂部具有相同邊框的標題

回答

相關問題