Non avvolgere gli elementi span

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?Non avvolgere gli elementi span

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; 
}

fonte

2013-07-04 Jonas

È 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/

fonte

2013-07-04 06:04:47 MaX

Fai attenzione che fare "blocco inline" delle carte può influire sulla dimensione dello spazio tra ogni carta. Alcuni browser, come Firefox, aggiungeranno un carattere di spazio aggiuntivo tra ogni carta scritta letteralmente nell'HTML, a causa dello spazio bianco tra i tag. –

grazie, vado con questa soluzione. – Jonas

@ RoryO'Kane È vero. Dall'osservazione del suo codice, non c'è spazio tra gli span, quindi dovrebbe andare bene. È qualcosa di cui essere consapevole, però. – MaX

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.

fonte

2013-07-04 05:57:56

grazie, anche questo funziona bene. – Jonas

Prova ad aggiungere questo alla tua CSS:

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

fonte

2013-07-04 05:58:34

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.

fonte

2013-07-04 06:07:26 Alexander

Non avvolgere gli elementi span

risposta

Problemi correlati