màu nền css mở rộng xa như văn bản?

Question

Làm cách nào để đặt màu nền của văn bản không mở rộng thành chiều rộng của trang gốc div? Tôi đã sử dụng h1{background color:white;} và quấn h1 quanh văn bản tôi muốn, nhưng nền trắng chỉ mở rộng ra ngoài văn bản. Nó gần giống như bạn đang làm nổi bật các từ.

Answer 1

h1 là phần tử khối, vì vậy, nó sẽ sử dụng tất cả các khu vực có sẵn. để thay đổi yếu tố này để nội tuyến, cho chỉ sử dụng chiều rộng của nó

h1 { 
    display: inline; 
    background-color: white; 
} 

http://jsfiddle.net/wxNQR/

Answer 2

Sự cố là h1 là phần tử cấp khối và theo các phần tử cấp khối mặc định sẽ mở rộng để lấp đầy tất cả chiều rộng có sẵn của phần tử gốc.

Cách đơn giản nhất để giải quyết này là để float các yếu tố:

h1 { 
    background-color: white; 
    float: left; 
} 

Sau đó bạn sẽ cần phải tạo kiểu cho đoạn tiếp theo, vì vậy mà nó không chảy quanh các yếu tố tiêu đề:

p { 
    clear: left; 
} 

Nếu bạn cảm thấy thoải mái không hỗ trợ IE7 trở xuống, bạn có thể sử dụng bộ chọn anh chị kế bên để tạo vùng chọn này, để chỉ p phần tử trực tiếp sau h1 các phần tử sẽ được tạo kiểu như vậy:

h1 + p { 
    clear: left; 
}