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

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

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

<强> jsFiddle

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

Answer 3

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

Answer 4

尝试将此添加到您的CSS：

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

不要包裹span元素

4 个答案: