CSS 不要包装 span 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17462741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Don’t wrap span elements
提问by Jonas
I've got a list of <span>elements that can be moved left and right inside a <div>element, and if some spans go outside the div they should be hidden. This works fine using overflow: hidden. ?However, if there are more spans than fit in the div, the spans wrap, which is undesired behaviour for my use case. How do I make the spans not wrap?
我有一个<span>可以在<div>元素内左右移动的元素列表，如果某些跨度超出 div，它们应该被隐藏。使用overflow: hidden. ? 但是，如果 div 中的跨度多于适合的跨度，则跨度会换行，这对于我的用例来说是不受欢迎的行为。如何使跨度不包裹？
I've made a jsFiddleto show what I mean. When you click inside the .boardyou'll add another .card. By the fourth card you'll see the wrapping.
我制作了一个jsFiddle来说明我的意思。当您在内部单击时，.board您将添加另一个.card. 到第四张牌时，您会看到包装。
Note:The fact that spans are used is not really important, so if it can be made to work with e.g. list items, that would probably be okay. The important thing is that the elements can contain an image and some text underneath.
注意：使用跨度这一事实并不重要，因此如果可以使其与例如列表项一起使用，那可能没问题。重要的是元素可以包含图像和下面的一些文本。
Here's the code from the jsFiddle:
这是来自 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;
}
回答by MaX
You can use inline-block on .card in stead of float, and then disable wrapping with nowrap:
您可以在 .card 上使用 inline-block 而不是 float，然后使用 nowrap 禁用包装：
For .card:
对于 .card：
display:inline-block;
For .cards:
对于 .cards：
white-space:nowrap;
回答by Rory O'Kane
Just set the width of .cardsto some huge number:
只需将的宽度设置.cards为一些巨大的数字：
.cards {
position: relative;
top: 10px;
width: 99999%;
}
The default width of .cardsis constrained to the width of its parent .board, 400px. Most of the time, having a maximum width is good, because it causes children to wrap if necessary. But since you don't mind overflow, it's okay to override this.
的默认宽度.cards限制为其父.board,的宽度400px。大多数情况下，最大宽度是好的，因为它会导致孩子在必要时换行。但是由于您不介意溢出，因此可以覆盖它。
回答by Alexander
You are trying to do 'block' layout with SPAN elements. SPAN elements are not suitable for block, that's what DIVs are for.
您正在尝试使用 SPAN 元素进行“块”布局。SPAN 元素不适合块，这就是 DIV 的用途。
回答by koala_dev
Try adding this to your CSS:
尝试将其添加到您的 CSS：
.cards {
white-space: nowrap;
float: left;
}
