css - 不要包装 span 元素

Question

我有一个 <span> 的列表<div> 中可以左右移动的元素元素，如果一些 span 超出了 div，它们应该被隐藏。使用 overflow: hidden 效果很好.但是，如果 span 的数量超出了 div 的容量，则 span 会换行，这对于我的用例来说是不希望出现的行为。如何使 span 不换行？

我做了一个jsFiddle表明我的意思。当您在 .board 中单击时您将添加另一个 .card .到第四张卡片时，您会看到 wrapper 。

注意: 使用 span 的事实并不重要，所以如果它可以与例如列出元素，这可能没问题。重要的是元素可以包含图像和下面的一些文本。

这是来自 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/