不要包裹span元素

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/

Answer 2

您正尝试使用SPAN元素执行“阻止”布局。 SPAN元素不适合阻止，这就是DIV的用途。

Answer 3

只需将.cards的宽度设置为一个巨大的数字：

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

jsFiddle

.cards的默认宽度约束为其父级.board，400px的宽度。大多数情况下，具有最大宽度是好的，因为它会导致儿童在必要时包裹。但既然你不介意溢出，可以覆盖它。

Answer 4

尝试将此添加到您的CSS：

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