Không quấn các phần tử nhịp

Question

Tôi có một danh sách các thành phần <span> có thể được di chuyển sang trái và phải bên trong một phần tử <div> và nếu một số khoảng trống nằm ngoài div thì chúng sẽ bị ẩn. Điều này hoạt động tốt bằng cách sử dụng overflow: hidden. Tuy nhiên, nếu có nhiều nhịp hơn phù hợp trong div, các nhịp quấn, đó là hành vi không mong muốn cho trường hợp sử dụng của tôi. Làm thế nào để làm cho các nhịp không quấn?

Tôi đã thực hiện một jsFiddle để hiển thị ý của tôi. Khi bạn nhấp vào bên trong .board, bạn sẽ thêm một số khác .card. Đến thẻ thứ tư bạn sẽ thấy gói.

Lưu ý: Thực tế là các nhịp được sử dụng không thực sự quan trọng, vì vậy nếu nó có thể được thực hiện để làm việc với ví dụ: các mục danh sách, có thể sẽ ổn. Điều quan trọng là các phần tử có thể chứa một hình ảnh và một số văn bản bên dưới.

Dưới đây là mã từ jsFiddle:

<div class="board"> 
    <div class="cards"></div> 
</div> 

$('.board').mousemove(function(e) { 
    $('.cards').css({left: e.pageX}); 
}); 

$('.board').click(function(e) { 
    $('.cards').append("<span class='card'></span>") 
}); 

.card { 
    border: 1px solid black; 
    width: 100px; 
    height: 100px; 
    float: left; 
    margin-left: 4px; 
    margin-right: 4px; 
} 

.cards { 
    position: relative; 
    top: 10px; 
} 

.board { 
    width: 400px; 
    height: 120px; 
    border: 1px solid red; 
    position: relative; 
    overflow: hidden; 
} 

Answer 1

Bạn có thể sử dụng inline-block trên .card thay cho float, và sau đó vô hiệu hóa gói với nowrap:

Đối .card:

display:inline-block; 

Đối .cards:

white-space:nowrap; 

http://jsfiddle.net/33kj4/1/

Answer 2

Chỉ cần thiết lập chiều rộng của .cards một số con số khổng lồ:

.cards { 
    position: relative; 
    top: 10px; 
    width: 99999%; 
} 

jsFiddle

Chiều rộng mặc định là .cards bị giới hạn ở độ rộng của bố mẹ .board, 400px. Hầu hết thời gian, có chiều rộng tối đa là tốt, bởi vì nó gây ra trẻ em để bọc nếu cần thiết. Nhưng vì bạn không phiền bị tràn, bạn có thể ghi đè điều này.

Answer 3

Hãy thử này thêm vào CSS của bạn:

.cards { 
    white-space: nowrap; 
    float: left; 
} 

Answer 4

Bạn đang cố gắng làm bố cục 'chặn' với các phần tử SPAN. Các phần tử SPAN không thích hợp cho khối, đó là những gì DIV.