đặt chiều rộng động chỉ với CSS?

Question

Tôi có tiêu đề (h1) nằm ở giữa trang. Tôi muốn thêm các dòng ở bên trái và bên phải của tiêu đề để chúng lấp đầy phần còn lại của chiều rộng của trang. Tuy nhiên, tôi muốn các dòng để thích ứng với chiều rộng của tiêu đề, đó là năng động. Vì vậy, tôi muốn chiều rộng của dòng được tính toán động.

Dưới đây là một ví dụ về những gì tôi đang cố gắng để hoàn thành: http://jsfiddle.net/cAEqE/1/

Trong ví dụ tôi đặt chiều rộng của dòng đến 35% để họ có thể có được hiệu quả mà tôi muốn. Tuy nhiên, nếu tiêu đề dài hơn, nó sẽ chia thành 2 dòng, và tôi không muốn điều đó xảy ra.

Ông chủ của tôi bảo tôi tránh javascript, vì vậy sẽ tuyệt vời khi chỉ sử dụng CSS. Tuy nhiên, nếu điều này hóa ra là không thể, tôi sẽ chuyển sang jQuery cũ tốt. Chúc mừng!

Chỉnh sửa: trang web có hình nền, vì vậy tôi không thể sử dụng nền trên h1. Cảm ơn!

Answer 1

Bạn có thể viết như thế này:

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> 

Kiểm tra này http://jsfiddle.net/cAEqE/27/

CẬP NHẬT

Kiểm tra này http://jsfiddle.net/cAEqE/63/

Answer 2

Thay vì sử dụng div s cho các dòng, bạn nên sử dụng một hình ảnh nền trên mẹ div.

Ví dụ, HTML của bạn sẽ đơn giản hơn nhiều:

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

Và CSS của bạn sẽ là:

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

tôi đã bị đánh cắp một chút công bằng của mã này từ Jira mà không basically what you're after.