Non avvolgere gli elementi span

Question

Ho una lista di elementi <span> che possono essere spostati a sinistra e destra all'interno di un elemento <div>, e se alcuni span vanno oltre il div, dovrebbero essere nascosti. Funziona perfettamente con overflow: hidden. Tuttavia, se ci sono più span di quelli che si trovano nel div, le span si avvolgono, il che è un comportamento indesiderato per il mio caso d'uso. Come faccio a rendere gli intervalli non avvolgere?

Ho fatto un jsFiddle per mostrare cosa intendo. Quando fai clic all'interno di .board, aggiungi un altro .card. Dalla quarta carta vedrai il wrapping.

Nota: Il fatto che gli span siano usati non è molto importante, quindi se può essere fatto funzionare con, ad es. elenca gli articoli, che probabilmente andrebbero bene. L'importante è che gli elementi possano contenere un'immagine e del testo sotto.

Ecco il codice dal 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

È possibile utilizzare inline-block su .card al posto del galleggiante e quindi disattivare avvolgimento con nowrap:

Per .card:

display:inline-block; 

Per .cards:

white-space:nowrap; 

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

Answer 2

Basta impostare la larghezza di .cards ad un numero enorme:

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

jsFiddle

La larghezza predefinita di .cards è limitata alla larghezza del suo genitore .board, 400px. La maggior parte delle volte, avere una larghezza massima è buona, perché fa sì che i bambini si avvolgano se necessario. Ma dal momento che non ti dispiace overflow, va bene ignorare questo.

Answer 3

Prova ad aggiungere questo alla tua CSS:

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

Answer 4

Si sta tentando di eseguire il layout "blocco" con gli elementi SPAN. Gli elementi SPAN non sono adatti per il blocco, ecco a cosa servono i DIV.