Prevent Wrapping of Containers (span or div)

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>

---

尝试这个：

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

---

It works with just this:

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

I did originally have float : left; and that prevented it from working correctly.

Thanks for posting this solution.

---

Particularly when using something like Twitter's Bootstrap, white-space: nowrap; doesn't always work in CSS when applying padding or margin to a child div . Instead however, adding an equivalent border: 20px solid transparent; style in place of padding/margin works more consistently.

链接地址: http://www.djcxy.com/p/88448.html

上一篇: 浮动图像溢出没有包装div

下一篇: 防止包装容器（跨度或格）