Предотвратить обертывание span или 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">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>

Обратите внимание, что вы можете опустить .slideContainer { overflow-x: scroll; }(какие браузеры могут или не могут поддерживать, когда вы читаете это), и вы получите полосу прокрутки в окне, а не в этом контейнере.

Ключ здесь display: inline-block. В настоящее время он имеет приличную кросс-браузерную поддержку , но, как обычно, его стоит протестировать во всех целевых браузерах.

Это работает только с этим:

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

У меня действительно было, float : left;и это препятствовало тому, чтобы это работало правильно.

Спасибо за размещение этого решения.

В частности , при использовании что - то вроде щебетать Bootstrap , white-space: nowrap;не всегда работает в CSS при применении отступов или маржи ребенка div. Однако вместо этого добавление эквивалентного border: 20px solid transparent;стиля вместо отступов / полей работает более согласованно.

Как уже упоминалось, вы можете использовать:

overflow: scroll;

Если вы хотите, чтобы полоса прокрутки появлялась только при необходимости, вы можете использовать опцию «auto»:

overflow: auto;

Я не думаю, что вы должны использовать свойство "float" с "overflow", но сначала мне придется попробовать ваш пример.

Похоже, div не выйдет за пределы ширины их тела. Даже внутри другого div.

Я бросил это, чтобы проверить (без доктайпа, хотя), и это не работает, как думал.

.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, поскольку это другая страница, и ее содержимое может быть очень широким.