防止跨度或div的换行
我想将一组固定宽度的div元素放入一个容器中，并显示水平滚动条。div/span元素应该出现在一行中，按照它们在HTML中出现的顺序从左到右(本质上是取消包装的)。
这样，水平滚动条就会出现，并且可以用来代替垂直滚动条来浏览内容(从左到右)。
我尝试过将它们放在一个容器中，然后在容器上放置一个white-space: nowrap样式，但是遗憾的是，它似乎仍然是包装的。
想法？
它看起来是这样的：
.slideContainer {
white-space: nowrap;
}
.slide {
width: 800px;
float: left;
display: inline;
}<div class="slideContainer">
<div class="slide">Some content</div>
<div class="slide">More content</div>
<div class="slide">Even More content!</div>
</div>
更新：
参见site的例子，但他们错误地认为不是另一种方式-尽管我相信这篇文章已经过时了。
回答 5
Stack Overflow用户
发布于 2009-03-25 01:26:59
试试这个：
.slideContainer {
overflow-x: scroll;
white-space: nowrap;
}
.slide {
display: inline-block;
width: 600px;
white-space: normal;
}<div class="slideContainer">
<span class="slide">Some content</span>
<span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
<span class="slide">Even more content!</span>
</div>
请注意，您可以省略.slideContainer { overflow-x: scroll; } (在阅读本文时使用browsers may or may not support )，并且您将在窗口上获得一个滚动条，而不是在这个容器上。
这里的关键是display: inline-block。现在已经有了decent cross-browser support，但是和往常一样，它值得在所有目标浏览器中测试。
Stack Overflow用户
发布于 2011-05-31 05:08:51
它只适用于以下内容：
.slideContainer {
white-space: nowrap;
}
.slide {
display: inline-block;
width: 600px;
white-space: normal;
}我最初使用的是float : left;，这导致它无法正常工作。
感谢您发布此解决方案。
Stack Overflow用户
发布于 2013-07-08 16:18:21
尤其是在使用像Twitter的Bootstrap这样的东西时，在对子div应用填充或边距时，white-space: nowrap;并不总是在CSS中起作用。但是，添加等效的border: 20px solid transparent;样式来代替填充/边距的效果更一致。
https://stackoverflow.com/questions/679804
复制相似问题