防止包装容器（span或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> 

更新：看到网站的例子，但他们错了不是另一种方式 – 我敢肯定这篇文章虽然老了。

Answer 1

尝试这个：

 .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> 

Answer 2

它适用于这个：

 .slideContainer { white-space: nowrap; } .slide { display: inline-block; width: 600px; white-space: normal; } 

我原来有float : left; 并阻止它正常工作。

感谢张贴这个解决scheme。

Answer 3

特别是使用Twitter的Bootstrap ， white-space: nowrap; 在向子div应用填充或边距时，并不总是在CSS中工作。 但是，相反，添加一个等效的border: 20px solid transparent; 风格代替填充/边距工作更一致。

Answer 4

如上所述，您可以使用：

 overflow: scroll; 

如果您只想在必要时显示滚动条，则可以使用“自动”选项：

 overflow: auto; 

我不认为你应该使用“溢出”的“浮动”属性，但我不得不先尝试你的例子。

Answer 5

看起来divs不会超出他们身体的宽度。 即使在另一个分区。

我扔了这个testing（虽然没有文档types），它不工作的想法。

 .slideContainer { overflow-x: scroll; } .slide { float: left; } 

 <div class="slideContainer"> <div class="slide" style="background: #f00">Some content Some content Some content Some content Some content Some content</div> <div class="slide" style="background: #ff0">More content More content More content More content More content More content</div> <div class="slide" style="background: #f0f">Even More content! Even More content! Even More content!</div> </div>