防止包裹span或div

147

我想将一组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>

展开摘要

更新：
请参阅站点上的示例，但是它们不是以其他方式使用是错误的-尽管我确信这篇文章已经过时了。

html css

— cgp
source

181

试试这个：

.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。如今，它具有不错的跨浏览器支持，但是像往常一样，值得在所有目标浏览器中进行测试。

— 罗恩·德维拉
source

1

实际上，我从完整的演示文稿中尝试了此方法，它似乎运行得比较好（至少在firefox 3，IE 7，Chrome和Opera中，这是我所关心的全部）

— cgp

只需设置white-space:normal包含的元素和white-space:nowrap父元素，对我来说就成功了。非常感谢！

— Noitidart

空格：normal是默认值，因此即使您没有设置它也可以。

— Parth'5

white-space: normal在这种情况下，必须在子级上设置@Parth ，因为其默认值white-space已被父级覆盖nowrap。

— GullerYA

17

它的工作原理如下：

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

我最初确实有float : left;，但是这使它无法正常工作。

感谢您发布此解决方案。

— 摩lish
source

3

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

— 布兰登
source

1

如前所述，您可以使用：

overflow: scroll;

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

overflow: auto;

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

— 汤普森
source

0

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

— ÓlafurWaage
source

溢出x或滚动x，我不记得它是。今天懒。

— 肯特·弗雷德里克