HTML/CSS Khoảng trắng phá vỡ

Question

Tôi tự hỏi tại sao với các đánh dấu như

http://jsfiddle.net/rkEpx/

tôi nhận được

Như bạn có thể thấy, các mục 1 và đơn cuối cùng đã liên kết của nó bị phá vỡ thành 3 dòng thậm chí tho có đủ không gian để mở rộng. Có thể có dòng không phá vỡ trừ khi theres thực sự không có không gian? Nếu có thể mà không đặt chiều rộng cố định hoặc sử dụng không gian không phá vỡ?

Answer 1

  Thực thể HTML hoặc white-space: nowrap; CSS. Nhưng nó sẽ không phá vỡ ngay cả khi thực sự không có không gian.

Bạn có thể thử sử dụng display: inline-block; thay vì float: left; cho li, img và/hoặc p của mình.

http://jsfiddle.net/2Mv2E/

Answer 2

Hãy thử thêm:

li { 
    padding: 0; 
    margin: 0 3px 0 0; 
    float: left; 
    max-width: 120px; 
white-space: nowrap; 
} 

Answer 3

Tôi không có ý tưởng tại sao nó là hành xử như thế, nhưng có vẻ như bạn có thể sửa chữa nó bằng cách thả nổi 's cũng p:

p { 
    float: left; 
} 

Tùy thuộc vào yêu cầu trình duyệt của bạn, bạn cũng có thể chọn chỉ cần phao p ngay sau hình ảnh:

img + p { 
    float: left; 
}