Question

我想将一组固定宽度的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以获取示例，但他们错误地认为不是另一种方式 - 我确信这篇文章已经过时了。

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>

请注意，您可以省略.slideContainer { overflow-x: scroll; }（当您阅读此内容时browsers may or may not support），并且您将在窗口而不是此容器上获得滚动条。

这里的关键是display: inline-block。现在这有decent cross-browser support，但像往常一样，值得在所有目标浏览器中进行测试。

Answer 2

它适用于此：

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

我最初有float : left;并且阻止它正常工作。

感谢您发布此解决方案。

Answer 3

特别是当使用Twitter的Bootstrap之类的内容时，white-space: nowrap;在向孩子div应用填充或边距时并不总是在CSS中起作用。相反，添加等效的border: 20px solid transparent;样式代替填充/边距可以更加一致地工作。

Answer 4

如上所述，您可以使用：

overflow: scroll;

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

overflow: auto;

我认为你不应该将“float”属性用于“溢出”，但我必须首先尝试你的例子。

Answer 5

看起来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加载，因为那是另一个页面，其内容可能非常广泛。

防止包装容器（span或div）

5 个答案: