Don’t wrap span elements

Question

我有一个<span>可以在<div>元素内左右移动的元素列表,如果有一些跨越div,它们应该被隐藏.这很好用overflow: hidden.但是,如果div中有更多的跨度,则跨越包,这对于我的用例来说是不希望的行为.如何使跨度不包裹？

我做了一个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;
}

Answer 1

您可以在.card上使用inline-block而不是float,然后使用nowrap禁用包装:

对于.card:

display:inline-block;

对于.cards:

white-space:nowrap;

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