防止容器包装（span或div） [英] Prevent Wrapping of Containers (span or 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>部分内容< / div> < div class =slide>更多内容< / div> < div class =slide>更多内容！< / div>< / div>  

更新：请参阅网站的例子，但他们错了，不是另一种方式 - 我相信这篇文章是旧的。

解决方案

请尝试以下操作：

  .slideContainer {overflow-x：scroll; white-space：nowrap;}。slide {display：inline-block; width：600px;空格：正常;}  

 < div class = slideContainer> < span class =slide>部分内容< / span> < span class =slide>更多内容。 Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod temporal 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。        < span class =slide>更多内容！< / span>< / div>  

注意，你可以省略 .slideContainer {overflow-x：scroll; } （浏览器可能或可能不支持当你读这个），你会得到一个滚动条在窗口而不是这个容器。

这里的关键是 display：inline-block 。现在有有效的跨浏览器支持，但是像往常一样，这是值得测试的所有目标浏览器是肯定的。

I'd like to put a group of div elements of fixed width into a container and have the horizontal scroll bar appear. The div/span elements should appear in a line, left to right in the order they appear in the HTML. (essentially unwrapped)

This way the horizontal scroll bar will appear and can be used instead of the vertical scroll bar for reading through the content (left to right).

I've tried floating them in a container and then putting a "white-space:nowrap" style on the container, but alas, it still seems to wrap. Ideas?

It looked like this:

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

Update: See site for examples, but they were wrong about not being another way - I'm sure the article is old though.

解决方案

Try this:

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

Note that you can omit .slideContainer { overflow-x: scroll; } (which browsers may or may not support when you read this), and you'll get a scrollbar on the window instead of on this container.

The key here is display: inline-block. This has decent cross-browser support nowadays, but as usual, it's worth testing in all target browsers to be sure.

这篇关于防止容器包装（span或div）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！