我有一个以页面为中心的标题(h1).我想在标题的左侧和右侧添加线条,以便它们填充页面宽度的其余部分.
但是,我希望线条适应标题的宽度,这是动态的.所以,我希望动态计算线的宽度.
但是,我希望线条适应标题的宽度,这是动态的.所以,我希望动态计算线的宽度.
这是我想要完成的一个例子:http://jsfiddle.net/cAEqE/1/
在示例中,我将线条的宽度设置为35%,以便它们可以获得我想要的效果.但是,如果标题更长,它将分为2行,我不希望这种情况发生.
我的老板告诉我要避免使用javascript,所以只使用CSS会很棒.但是,如果事实证明这是不可能的,我将转向优秀的旧jQuery.
干杯!
编辑:网站有背景图片,所以我不能在h1上使用背景.谢谢!
解决方法
你可以像这样写:
CSS
h1 { font-size: 26px; text-align:center; display:inline-block; *display:inline;/* For IE7*/ *zoom:1;/* For IE7*/ background:#fff; padding:0 10px; } #title { text-align:center; border-bottom:1px solid #97999C; height:10px }
HTML
<div id="title"> <h1>TITLE TEST</h1> </div>
检查这个http://jsfiddle.net/cAEqE/27/
更新