dinamik genişliği sadece CSS?

Question

Sayfanın ortasındaki bir başlığa (h1) sahibim. Başlığın soluna ve sağına çizgiler eklemek istiyorum, böylece sayfanın genişliğini geri katacaklar. Ancak, satırların, başlığın genişliğine uyum sağlamasını istiyorum. Yani, hattın genişliğinin dinamik olarak hesaplanmasını istiyorum. onlar istediğim etkiyi alabilir bu yüzden% 35'e hatları genişliğini ayarlamak örnekte http://jsfiddle.net/cAEqE/1/

:

İşte başarmak istediğim şey bir örnek. Ancak, başlık daha uzunsa, 2 satıra bölünür ve bunun olmasını istemiyorum.

Patronum javascript'ten kaçınmamı söyledi, bu yüzden sadece CSS kullanmak mükemmel olurdu. Ancak, eğer bu imkansız olursa, eski bir jQuery'ye döneceğim. Şerefe!

Düzenleme: Web sitesinin arka plan resmi vardır, bu yüzden h1 üzerinde arka plan kullanamıyorum. Teşekkürler!

Answer 1

Böyle yazabilirsiniz:

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> 

Kontrol bu http://jsfiddle.net/cAEqE/27/

GÜNCELLEME

Kontrol Yerine hatları için div s kullanarak bu http://jsfiddle.net/cAEqE/63/

Answer 2

, sen ebeveyn div üzerinde bir arka plan görüntüsü kullanmalıdır.

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

Ve CSS olurdu:

Örneğin, HTML çok daha basit olurdu ben basically what you're after yapar JIRA bu kodun adil biraz çalmışlar

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; 
} 

.