HTML overflow:scroll " und " float

Ich habe ein div, welches viele ungeordnete Listen (ul). Ich habe jedes ul-Einstellung "float:left". Und ich habe auch das übergeordnete div-Element, das Sie enthält, auf "overflow-x:scroll". Was passiert, ist dass das ul wickeln, wenn Sie auf den Rand der Seite, und wohnen nicht nebeneinander nutzen Sie die Bildlauf-Eigenschaft des parent-div (der scroll-Balken da sind). Warum? Wie kann ich dieses Problem beheben?

Vielen Dank für jede Hilfe.

InformationsquelleAutor s2cuts | 2011-05-08
  1. 6

    müssen Sie legen Sie die uls in ein weiteres div, dem werden Sie geben, width=[Breite des ul]*[Anzahl der uls]

    http://jsfiddle.net/seler/gAGKh/
    oder zählt die gesamte Breite von uls
    http://jsfiddle.net/seler/gAGKh/1/

    • Erstellen einer inneren div-hilft eine Menge. Statt mit JS zu berechnen der entsprechenden Breite habe ich festgestellt, dass die Einstellung der statischen Breite des neuen, inneren div, um eine ausreichend große Breite zu berücksichtigen, für die extremsten Fall nicht Schaden, um das layout. Dank seler.
    • das kann nur funktionieren, wenn Sie ständig ul Breite und Konstante ul-Nummer.
    • Fiesen javascript Update, die Antwort beschrieben, die von ddlshack ist eine saubere Lösung.
    InformationsquelleAutor seler
  2. 6

    Können Sie Ihre Listenelemente auf display: inline-block, dann verwenden Sie white-space: nowrap. Funktioniert in den meisten modernen Browsern.

    http://jsfiddle.net/gAGKh/22/

    InformationsquelleAutor ddlshack
  3. 5

    Weil Sie schwebte die ULs, die Sie nicht im Dokument vorhanden sind fließen nicht mehr, so dass Sie nicht erweitern Sie das übergeordnete div (daher der Verpackung.)

    Versuchen Sie eine explizite Breite des übergeordneten div, der es ermöglicht, alle von Ihnen nebeneinander existieren.

    AUCH, wenn Sie nicht-clearing-ULs in der parent-div, dann werden Sie mehr als wahrscheinlich ausführen in Fragen gibt es auch vertikale. Stellen Sie sicher, dass Sie deaktivieren Sie Ihren Schwimmern 🙂

    • Die Erklärung war Teil meiner Abfrage, ich danke Ihnen. Auch können Sie erklären, was Sie bedeuten, von "Stellen Sie sicher, dass Sie klar Ihr schwebt"?
    • Stellen Sie sicher, dass Sie so etwas wie clearfix, erweitern Sie Ihre übergeordneten Container auf die Höhe des Inhalts. Sonst, Sie laufen in Probleme mit der Höhe ähnlich wie die Probleme, die Sie hatten mit horizontalen Breite. Nur ein heads-up.
    InformationsquelleAutor Tim
  4. 0

    Müssen Sie:

    1. Machen die <li> auch float.
    2. Feste Breite zu jeder <ul>.
    3. Feste Breite an, die mit <div>, genug für alle Listen.

    Beispiel:

    ul { width: 250px; }
li { margin-left: 5px; }
ul, li { float: left;  }
div { overflow-x: scroll; width: 750px; }

    Testfall.

    InformationsquelleAutor Shadow Wizard
Schreibe einen Kommentar