css - significado - No envuelva elementos de span

span y div

Question

Tengo una lista de elementos <span> que se pueden mover a la izquierda y a la derecha dentro de un elemento <div> , y si algunos tramos van fuera de la div, deberían estar ocultos. Esto funciona bien usando overflow: hidden . Sin embargo, si hay más vanos que caben en la división, los vanos se ajustan, lo cual es un comportamiento no deseado para mi caso de uso. ¿Cómo hago para que no se envuelvan los palos?

He hecho un jsFiddle para mostrar lo que quiero decir. Cuando haces clic dentro del .board , agregarás otra .card . Por la cuarta carta verás la envoltura.

Nota: el hecho de que se utilicen espacios no es realmente importante, por lo que si se puede hacer funcionar, por ejemplo, con elementos de la lista, probablemente esté bien. Lo importante es que los elementos pueden contener una imagen y algún texto debajo.

Aquí está el código del 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

Estás tratando de hacer un diseño de ''bloque'' con elementos SPAN. Los elementos SPAN no son adecuados para bloques, para eso están los DIV.

Answer 2

Intenta agregar esto a tu CSS:

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

Answer 3

Puede usar inline-block en .card en lugar de flotar, y luego deshabilitar el ajuste con nowrap:

Para .card:

display:inline-block;

Para .cards:

white-space:nowrap;

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

Answer 4

Solo establece el ancho de .cards a un número enorme:

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

jsFiddle

El ancho predeterminado de .cards está restringido al ancho de su .board principal, 400px . La mayoría de las veces, tener un ancho máximo es bueno, porque hace que los niños se envuelvan si es necesario. Pero como no te importa el desbordamiento, está bien anular esto.