仅用CSS设置动态宽度？

Question

我有一个以页面为中心的标题(h1).我想在标题的左侧和右侧添加线条,以便它们填充页面宽度的其余部分.但是,我希望线条适应标题的宽度,这是动态的.所以,我希望动态计算线的宽度.

这是我想要完成的一个例子:http://jsfiddle.net/cAEqE/1/

在示例中,我将线条的宽度设置为35%,以便它们可以获得我想要的效果.但是,如果标题更长,它将分为2行,我不希望这种情况发生.

我的老板告诉我要避免使用javascript,所以只使用CSS会很棒.但是,如果事实证明这是不可能的,我将转向优秀的旧jQuery.干杯!

编辑:网站有背景图片,所以我不能在h1上使用背景.谢谢!

Answer 1

你可以像这样写:

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/

更新

检查这个http://jsfiddle.net/cAEqE/63/