Verhindern Sie das Umwickeln von Span oder Div

Lesezeit: 4 Minuten

Benutzer-Avatar
cgp

Ich möchte eine Gruppe von setzen div Elemente mit fester Breite in einen Container und lassen die horizontale Bildlaufleiste erscheinen. Das div/span Elemente sollten in einer Zeile von links nach rechts in der Reihenfolge erscheinen, in der sie im HTML erscheinen (im Wesentlichen ausgepackt).

Dadurch erscheint der horizontale Scrollbalken und kann anstelle des vertikalen Scrollbalkens zum Durchlesen des Inhalts (von links nach rechts) verwendet werden.

Ich habe versucht, sie in einen Behälter zu schwimmen und dann einen zu setzen white-space: nowrap Stil auf dem Behälter, aber leider scheint es immer noch zu wickeln.

Ideen?

Es sah so aus:

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

AKTUALISIEREN:

Sehen Seite? ˅ zum Beispiel, aber sie haben sich geirrt, weil sie nicht anders waren – ich bin mir jedoch sicher, dass der Artikel alt ist.

Benutzer-Avatar
Ron DeVera

Versuche dies:

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

Beachten Sie, dass Sie weglassen können .slideContainer { overflow-x: scroll; } (die Browser können unterstützt werden oder nicht wenn Sie dies lesen), und Sie erhalten eine Bildlaufleiste auf dem Fenster statt auf diesem Container.

Der Schlüssel hier ist display: inline-block. Das hat anständige Cross-Browser-Unterstützung heutzutage, aber wie üblich lohnt es sich, es in allen Zielbrowsern zu testen, um sicherzugehen.

  • Eigentlich habe ich dies getrennt von meiner vollständigen Präsentation ausprobiert und es schien relativ gut zu funktionieren (zumindest in Firefox 3, IE 7, Chrome und Opera, was so ziemlich alles ist, was mich interessiert).

    – vgl

    25. März 2009 um 3:13 Uhr

  • Einfach einstellen white-space:normal auf die enthaltenen Elemente und white-space:nowrap auf dem Elternteil hat den Trick für mich getan. Vielen Dank!

    – Noitidart

    11. Oktober 2015 um 21:02 Uhr

  • white-space: normal ist der Standardwert, also ist es in Ordnung, auch wenn Sie ihn nicht setzen.

    – Teil

    6. Mai 2016 um 9:12 Uhr

  • @Parth white-space: normal MUSS in diesem Fall auf die Kinder gesetzt werden, da deren Vorgabe white-space wurde bereits von den Eltern überschrieben nowrap.

    – GullerYA

    27. Oktober 2019 um 11:56 Uhr


Benutzer-Avatar
Demolishun

Es funktioniert nur damit:

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

Ich hatte ursprünglich float : left; und das verhinderte, dass es richtig funktionierte.

Danke für das Posten dieser Lösung.

Benutzer-Avatar
brandonscript

Besonders wenn Sie so etwas wie Twitter verwenden Bootstrap, white-space: nowrap; funktioniert in CSS nicht immer, wenn auf ein untergeordnetes Element Auffüllung oder Rand angewendet wird div. Stattdessen jedoch ein Äquivalent hinzufügen border: 20px solid transparent; style anstelle von padding/margin funktioniert konsistenter.

Wie erwähnt können Sie verwenden:

overflow: scroll;

Wenn Sie möchten, dass die Bildlaufleiste nur bei Bedarf angezeigt wird, können Sie die Option “Auto” verwenden:

overflow: auto;

Ich denke nicht, dass Sie die Eigenschaft “float” mit “overflow” verwenden sollten, aber ich müsste Ihr Beispiel zuerst ausprobieren.

Benutzer-Avatar
Ólafur Waage

Sieht so aus, als würden Divs nicht über die Breite ihres Körpers hinausgehen. Auch innerhalb einer anderen div.

Ich habe das zum Testen hochgeworfen (allerdings ohne Doctype) und es funktioniert nicht wie gedacht.

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

Was ich denke, ist, dass die inneren Divs über einen iFrame geladen werden könnten, da dies eine andere Seite ist und ihr Inhalt sehr breit sein könnte.

  • overflow-x oder scroll-x , ich kann mich nicht erinnern, was es ist. Faul heute.

    – Kent Fredric

    25. März 2009 um 0:45 Uhr

  • overflow-x oder scroll-x , ich kann mich nicht erinnern, was es ist. Faul heute.

    – Kent Fredric

    25. März 2009 um 0:45 Uhr

1333830cookie-checkVerhindern Sie das Umwickeln von Span oder Div

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy