水平线在中间的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标题

回答

相关问题