Предотвратить обертывание span или div

Я хотел бы поместить группу элементов div с фиксированной шириной в контейнер, чтобы появилась горизонтальная полоса прокрутки. Элементы div/span должны отображаться в строке слева направо в том порядке, в котором они отображаются в HTML (по сути, в развернутом виде).

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

Я попытался поместить их в контейнер, а затем поместить white-space: nowrap style на контейнер, но, увы, он все еще выглядит как перенос.

Идеи?

Это выглядело так:

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

Ответ 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>

Ответ 2

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

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

Я изначально имел float : left;, и это помешало ему работать правильно.

Спасибо за публикацию этого решения.

Ответ 3

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

Ответ 4

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

overflow: scroll;

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

overflow: auto;

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

Ответ 5

Похоже, что divs не выходят за пределы своей ширины тела. Даже внутри другого 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>