Предотвратите обертывание промежутка или отделения

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

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

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

Идеи?

Это было похоже на это:

.slideContainer {
    white-space: nowrap;
}
.slide { 
    width: 800px;
    float: left;
    display: inline;
}
Some content
More content
Even More content!

ОБНОВЛЕНИЕ:
Обратитесь на сайт за примерами, но они были неправы относительно того, чтобы не быть иначе - я уверен, что статья стара все же.

137
задан Alexander Abakumov 5 July 2019 в 22:52
поделиться

3 ответа

Попробуйте это:

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

168
ответ дан 23 November 2019 в 23:34
поделиться

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

Я подбросил это для тестирования (без 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>

То, что я думаю, - то, что внутреннее отделение могло быть загружено через iFrame, так как это - другая страница, и ее содержание могло быть очень широким.

0
ответ дан 23 November 2019 в 23:34
поделиться

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

overflow: scroll;

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

overflow: auto;

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

1
ответ дан 23 November 2019 в 23:34
поделиться
Другие вопросы по тегам:

Похожие вопросы: