水平線在中間的CSS標題

我試圖用左側的一些文本製作水平線。水平線在中間的CSS標題

例如：

my title -------------------------------------

我可以通過把背景的文字，但沒有彩色背景做，我不能

是任何人有答案嗎？

<style> 
h1 { 
    font-weight:normal; 
    line-height:0; 
    height:0; 
    border-bottom:1px solid #000; 
    vertical-align:middle; 

} 
</style> 
<h1><span>my title</span></h1>

感謝

來源

2011-07-18 Slump

被''------------------應該是文字或圖像？ –

如果以下回答不能解決您的問題，請您澄清一下您正在查找的結果，以及爲什麼某些方案無效？ – KatieK

不使用背景，你可以嘗試使用：

<style> 

span:after{ 
    content:"-------------------------------------"; 
} 
</style> 
<h1><span>my title</span></h1>

在這種情況下，你所使用的CSS：僞下課。看看this article來檢查跨瀏覽器的兼容性。和here你會發現一個預編碼的例子。

希望它有幫助！

來源

2011-07-18 16:27:52 Rdpi

這個解決方案的積極方面是它可以處理任何背景顏色。缺點是crossbrowser compat – Rdpi

你對跨度的背景顏色的建議似乎工作得很好。 See it here.

或者，您可以使用背景圖像代替h1上的邊框。

h1 { background: url(http://i.stack.imgur.com/nomLz.gif) repeat-x left center; } 

h1 span { 
    background-color: #FFF; 
    padding-right: 3px; 
}

Example.

（用於背景的1x1的黑色圖像。1）

來源

2011-07-18 16:33:30 KatieK

我建議使用跨度的背景顏色，說實話 - 不需要使用額外的圖像（儘管圖像可以定製，如果這是需要的）。 +1的多功能性。 – Nightfirecat

同意。我對所期望的結果並不確定，所以我提供了另一種選擇。 – KatieK

水平線在中間的CSS標題

回答

相關問題