Предотвращение упаковки контейнеров (span или div)

Question

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

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

Я пытался поместить их в контейнер, а затем поместить в контейнер стиль "пробел: сейчас", но, увы, он все еще выглядит как перенос. Идеи?

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

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

Обновление: см. site для примеров, но они ошиблись из-за того, что не были другим способом - хотя я уверен, что статья старая.

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

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

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

Answer 2

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

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

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

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

Answer 3

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

Answer 4

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

overflow: scroll;

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

overflow: auto;

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

Answer 5

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