thủ thuật cho các phần tử nổi bên trong các phần tử danh sách

Question

Tôi đang cố tạo danh sách hướng dẫn sử dụng danh sách có thứ tự (ol). Bên trong tôi muốn các văn bản cho các hướng dẫn được thả nổi bên trái và hình ảnh hiển thị các bước nổi bên phải.

Tôi đã thử gói nội dung bên trong mục danh sách (li) như sau:

<ol> 
     <li><p style="float:left">Follow these instructions</p><img style="float:right" src="[***]" alt="" /></li> 
    </ol> 

Đó chỉ gửi hình ảnh bên ngoài các yếu tố li. Tôi đã thử thêm một div xóa sau khi hai yếu tố nổi bên trong li, tôi đã cố gắng thêm một hack rõ ràng cho các phần tử li chính nó. Tôi cũng đã cố gắng lồng các phần tử p và img bên trong các div được thả nổi.

Điều này có thể thực hiện được không? Muốn sử dụng cách này, nhưng sẽ tạo ra một số giải pháp khác nếu không.

Answer 1

Vùng chứa không nổi sẽ không nhận ra nội dung của nó khi có và chiều rộng hoặc chiều cao, làm cho vùng chứa sụp đổ đến chiều cao tối thiểu cho phép cho bất kỳ quy tắc CSS nào khác.

Để đoạn và hình ảnh bị hạn chế bởi phần tử danh sách có chứa, bạn sẽ cần phải nổi cả phần tử danh sách và danh sách thứ tự do cha mẹ sắp xếp.

Cả danh sách có thứ tự và các thành phần danh sách sau đó sẽ giảm xuống độ rộng tối thiểu cần thiết để đóng gói nội dung theo cách trình bày. Điều này có thể dẫn đến một danh sách quá mỏng. Áp dụng chiều rộng phù hợp cho danh sách theo thứ tự và các mục danh sách để xử lý việc này.

Cân nhắc xóa mọi phần tử ngay bên dưới danh sách được sắp xếp trong DOM để đảm bảo chúng không trượt sang trái hoặc phải của danh sách.

Answer 2

<ol> 
    <li> 
    <div> 
     <p style="float:left">Follow these instructions</p> 
     <img style="float:right" src="[***]" alt="" /> 
    </div> 
    </li> 
</ol> 

Hãy thử điều này, nó đã giúp tôi.

Answer 3

Bạn cũng có thể xem xét sử dụng overflow: hiddentechnique; thêm overflow: hidden vào số li của bạn sẽ cho phép mở rộng để chứa nội dung được thả nổi.

jsFiddle here.