防止跨度或分度的缠绕

我想把一组固定宽度的 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>

更新:
参见 工地的例子，但是他们错误地认为不应该是另一种方式——我敢肯定这篇文章已经过时了。

186112 次浏览
小开

看起来 div 不会超出身体的宽度，即使是在另一个 div 内。

我抛出了这个测试(虽然没有 doctype) ，但它并不像我想的那样工作。

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

我的想法是，内部 div 的可以通过 iFrame 加载，因为这是另一个页面，其内容可以非常广泛。

小开

正如前面提到的，你可以使用:

overflow: scroll;

如果你只想在必要的时候显示滚动条，你可以使用“自动”选项:

overflow: auto;

我认为您不应该在“ overflow”中使用“ float”属性，但是我必须首先尝试您的示例。

小开
最佳答案

试试这个:

.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; }(当您读这个时，它是 浏览器可能支持，也可能不支持) ，您将在窗口上而不是在这个容器上得到一个滚动条。

这里的关键是 display: inline-block。现在它已经有了 良好的跨浏览器支持，但是和往常一样，它值得在所有目标浏览器中进行测试来确认。

小开

它的工作原理是这样的:

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

我最初有 float : left;，这阻碍了它的正确工作。

谢谢你发布这个解决方案。

小开

特别是当使用类似 Twitter 的 鞋带的东西时，white-space: nowrap;并不总是在 CSS 中工作，当应用填充或边距到子 div时。然而，添加一个相同的 border: 20px solid transparent;样式代替填充/边距工作得更加一致。


提交答案