Tại sao màu nền của tôi không hiển thị nếu tôi có màn hình: inline?

<html> 
    <body> 
     <div style="display: inline; background-color: #555;"> 
      <h3>test</h3> 
     </div> 
    </body> 
</html>

Đây là mã của tôi. Tôi tự hỏi tại sao màu nền của tôi không hiển thị. Nếu tôi thay đổi hiển thị css từ nội dòng thành khối, thì nó sẽ hiển thị. Tại sao nó không hiển thị nếu hiển thị nội tuyến? Tôi đang cố gắng hiểu lý do của vấn đề khác ngoài việc tìm kiếm giải pháp.Tại sao màu nền của tôi không hiển thị nếu tôi có màn hình: inline?

Nguồn

2011-09-16 user926958

Xem thêm: http://stackoverflow.com/questions/3099030/displayinline-vs-displayblock – fncomp

Div không chiếm dung lượng nếu nội tuyến. nếu bạn muốn phần tử nội tuyến hiển thị dưới dạng chiều cao của trẻ em, hãy sử dụng display: inline-block;.

Để có một cuộc thảo luận tốt, tôi tin tưởng QuirksMode sẽ tốt hơn là của riêng tôi. Ý chính là một yếu tố inline không đẩy các yếu tố khác ra khỏi con đường.

Nguồn

2011-09-16 03:35:27 fncomp

+1, tốt đẹp. inline-block rất có thể là những gì OP mong muốn. – Joe

Tôi đang cố gắng hiểu lý do của vấn đề thay vì tìm kiếm giải pháp. Bạn có thể giải thích chi tiết hơn về vấn đề này không? Bạn có nghĩa là nếu nó là nội tuyến, sau đó nó không thể phát hiện chiều rộng của h3, do đó, nó vẽ chiều rộng 0? – user926958

Tôi hiểu rằng phần tử chỉ chiếm nhiều không gian vì nó cần hiển thị nó là '> *' trên cùng một dòng, ví dụ: bản văn. Xin lỗi, kiến thức về CSS của tôi dừng lại ở nơi nó không còn giúp tôi tạo kiểu trang đúng cách, nhưng tiện ích ở cuối liên kết QuirksMode sẽ khiến cho nó dễ hiểu hơn. – fncomp

Vấn đề là bạn có H3, một blocking element, bên trong số inline element.

Bạn có thể xem những gì đang xảy ra với:

h3 
{ 
    background-color: inherit; 
}

hoặc H3 inline:

h3 
{ 
display: inline; 
}

Nguồn

2011-09-16 03:39:26 Joe

Xin lỗi, đã phải nói điều gì đó kể từ khi tôi cười lần thứ hai. Tôi thích cái tên đó :-) – fncomp

Nếu bạn đang cố gắng để tạo ra một hiệu ứng highlighter sử dụng dưới đây thay vì:

<h3><span style="background-color: #555;">test</span></h3>

Nguồn

2011-09-16 03:39:40 Reina

div là phần tử khối theo mặc định. Thay đổi mô hình hiển thị của một phần tử khối thành nội tuyến không phải là một thực hành tốt. các tiêu đề cũng là các phần tử khối. Lồng ghép phần tử khối vào phần tử nội tuyến không phải là html hợp lệ. Nếu bạn muốn đánh dấu như hiệu ứng (cho màu nền chỉ để văn bản không phải toàn bộ phần tử hộp) bạn cần phải sử dụng một yếu tố nội tuyến như một span.

<html> 
    <body> 
     <div> 
      <h3><span style="background-color: #555;">test</span></h3> 
     </div> 
    </body> 
</html>

Nguồn

2011-09-16 03:55:31 Mohsen

giải pháp đơn giản, tốt nhất trong một số trường hợp là thêm một số padding để div inline chứa tiêu đề của bạn

<div style="display: inline; background-color: #555; padding:5px;"> 
<h3>test</h3> 
</div>

Nguồn

2011-09-16 07:38:31 Fahad

Các phiên bản mới nhất của CSS2.1 đã này để nói về vấn đề này:

Khi một hộp nội tuyến chứa một hộp cấp khối trong dòng, hộp nội tuyến (và tổ tiên nội tuyến của nó trong cùng một hộp dòng) bị hỏng xung quanh khối hộp cấp ck (và bất kỳ anh chị em cấp khối nào được liên tiếp hoặc chỉ được tách biệt bằng khoảng trắng có thể thu gọn và/hoặc yếu tố ), chia hộp nội tuyến thành hai hộp (ngay cả khi bên trống), một ở mỗi bên của hộp cấp khối. Các dòng hộp trước giờ nghỉ và sau giờ nghỉ được đính kèm trong các hộp khối ẩn danh và hộp cấp khối trở thành anh chị em của những hộp ẩn danh đó. Khi một hộp nội tuyến bị ảnh hưởng bởi vị trí tương đối , bất kỳ bản dịch kết quả nào cũng sẽ ảnh hưởng đến hộp cấp khối có trong hộp nội tuyến.

Nói cách khác, từ quan điểm bố cục, kết hợp div và h3 được nội tuyến tạo thành một hộp nội tuyến, một hộp khối và một hộp nội tuyến khác. Chỉ có hai hộp nội tuyến có định dạng (tức làmàu nền) và hộp khối không tạo thành bất kỳ phần nào của hộp nội tuyến do div xác định và do đó có cài đặt màu nền mặc định (trong suốt, hiển thị thông qua màu nền của hộp chứa khối).

Nguồn

2011-09-16 07:59:42 Alohci

Tại sao màu nền của tôi không hiển thị nếu tôi có màn hình: inline?

Trả lời

Các vấn đề liên quan