Đặt hiển thị: phần tử nội tuyến bên trong màn hình lồng nhau: phần tử khối không hoạt động?

Question

Xem ví dụ này:

http://jsfiddle.net/aLrfmyqm/

p { 
 
    display: inline; 
 
} 
 
    
 
em { 
 
    display:block; 
 
}

<p> Outer inline <em>Block <p>Inner inline</p></em></p>

tôi hy vọng các <p>Inner inline</p> được inlined với Block, tuy nhiên, nó bắt đầu trong một dòng mới. Có ai có ý tưởng về điều này không? Cảm ơn!

Answer 1

Đánh dấu của bạn không hợp lệ. Bạn không được giả mạo một phần tử p bên trong phần tử p và do đó là vấn đề.

Từ W3C:

Yếu tố P đại diện cho một đoạn văn. Nó không thể chứa các thành phần khối (bao gồm cả chính P).

Kiểm tra nguồn gốc và bạn sẽ nhận được nó tại sao nó cư xử khác biệt so với những gì bạn mong đợi nó sẽ

Trình duyệt của bạn sẽ thực sự tách tất cả các thẻ ra và đóng p yếu tố cho bạn .

Vậy cách chúng tôi khắc phục sự cố? Sử dụng các yếu tố <span> thay vì <p>

Demo

Answer 2

Có hai cách để làm điều này:

1. Chuyển đổi các yếu tố p để div.

<div> Outer inline <em>Block <p>Inner inline</p></em></div> 

2. Hoặc thay đổi css của p để inline-block như:

   p { display: inline-block; }

xem demo: https://jsfiddle.net/sonam185/sahfvhdd/
demo với div yếu tố: http://jsfiddle.net/sonam185/3c3cyv4z/