Zapobiegaj zawijaniu span lub div

Chciałbym umieścić divw kontenerze grupę elementów o stałej szerokości i wyświetlić poziomy pasek przewijania. Elementy div/ spanpowinny pojawić się w wierszu, od lewej do prawej w kolejności, w jakiej pojawiają się w kodzie HTML (zasadniczo rozpakowane).

W ten sposób pojawi się poziomy pasek przewijania, którego można użyć zamiast pionowego paska przewijania do czytania treści (od lewej do prawej).

Próbowałem unosić je w pojemniku, a następnie nakładać white-space: nowrapstyl na pojemnik, ale niestety nadal wydaje się, że się zawija.

Pomysły?

Wyglądało to tak:

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

AKTUALIZACJA: Przykłady można
znaleźć w witrynie , ale mylili się, mówiąc, że nie są inaczej - jestem jednak pewien, że artykuł jest stary.

Spróbuj tego:

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

Zauważ, że możesz pominąć .slideContainer { overflow-x: scroll; }(które przeglądarki mogą, ale nie muszą obsługiwać, kiedy to czytasz), a otrzymasz pasek przewijania w oknie zamiast w tym kontenerze.

Kluczem jest tutaj display: inline-block. Obecnie ma przyzwoitą obsługę wielu przeglądarek , ale jak zwykle warto przetestować ją we wszystkich docelowych przeglądarkach, aby mieć pewność.

Działa tylko z tym:

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

Pierwotnie miałem float : left;i to uniemożliwiło poprawne działanie.

Dziękujemy za opublikowanie tego rozwiązania.

Szczególnie, gdy używasz czegoś takiego jak Bootstrap Twittera , white-space: nowrap;nie zawsze działa w CSS podczas stosowania dopełnienia lub marginesu do dziecka div. Jednak zamiast tego dodanie równoważnego border: 20px solid transparent;stylu zamiast dopełnienia / marginesu działa bardziej konsekwentnie.

Jak wspomniano, możesz użyć:

overflow: scroll;

Jeśli chcesz, aby pasek przewijania pojawiał się tylko w razie potrzeby, możesz użyć opcji „auto”:

overflow: auto;

Nie sądzę, abyś używał właściwości „float” z wartością „overflow”, ale najpierw musiałbym wypróbować Twój przykład.

Wygląda na to, że elementy div nie wychodzą poza szerokość ciała. Nawet w innym div.

Wyrzuciłem to, aby przetestować (chociaż bez dokumentu) i nie działa tak, jak myślano.

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

Myślę o tym, że wewnętrzny element DIV można załadować przez iFrame, ponieważ jest to inna strona, a jej zawartość może być bardzo szeroka.