Не обертывайте элементы span

Ive получил список элементов <span>, которые можно перемещать влево и вправо внутри элемента <div>, и если некоторые промежутки выходят за пределы div, они должны быть скрыты. Это работает отлично, используя overflow: hidden. Однако, если в div больше пробелов, чем в div, обтекание охватывает, что является нежелательным поведением для моего варианта использования. Как сделать прокрутки не обернутыми?

Ive сделал jsFiddle, чтобы показать, что я имею в виду. Когда вы нажмете внутри .board, вы добавите еще один .card. По четвертой карте вы увидите упаковку.

Примечание. Тот факт, что используются интервалы, не очень важен, поэтому, если его можно заставить работать, например, элементы списка, которые, вероятно, будут в порядке. Важно то, что элементы могут содержать изображение и текст под ним.

Вот код из 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;
}

Ответ 1

Вы можете использовать встроенный блок на .card вместо float, а затем отключить обертку с помощью nowrap:

Для .card:

display:inline-block;

Для .cards:

white-space:nowrap;

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

Ответ 2

Просто установите ширину .cards на огромное количество:

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

jsFiddle

Ширина по умолчанию .cards ограничена шириной родительского .board, 400px. Большую часть времени, имея максимальную ширину, хорошо, потому что это заставляет детей обертывать, если необходимо. Но так как вы не возражаете переполнения, все в порядке, чтобы переопределить это.

Ответ 3

Вы пытаетесь выполнить компоновку "block" с элементами SPAN. Элементы SPAN не подходят для блока, для чего предназначены DIV.

Ответ 4

Попробуйте добавить это в свой CSS:

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