CSSのみで動的な幅を設定しますか？

Question

私はページの中央にあるタイトル（h1）を持っています。タイトルの左右に行を追加して、ページの幅の残りの部分を埋めるようにします。 しかし、私は線がタイトルの幅に適応することを望んでいます。これは動的です。だから、ラインの幅を動的に計算したい。彼らは私が欲しい効果を得ることができるので、私は35％にライン幅を設定する例でhttp://jsfiddle.net/cAEqE/1/

：

は、ここで私が達成しようとしているものの例です。しかし、タイトルが長ければ、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/

UPDATED

チェックする代わりにラインのdiv Sを使用してのこのhttp://jsfiddle.net/cAEqE/63/

Answer 2

は、あなたが親divに背景画像を使用する必要があります。

たとえば、あなたのHTMLは、はるかに簡単になります：

<div id="content"> 
    <h1>TITLE TEST</h1> 
</div>​ 

そして、あなたのCSSは次のようになります。

h1 { 
    font-size: 26px; 
    background-color: white; 
    display:inline; 
    padding:0 30px; 
} 

#content { 
    text-align:center; 
    width:100%; 
    background:transparent url(https://jira.atlassian.com/s/en_UKtovngv/725/4/1.0/_/images/mod_header_bg.png) repeat-x left center; 
    margin:0; 
    padding:0; 
} 

私はbasically what you're afterを行うのJiraからこのコードの公平なビットを盗まれました。