Float Abschnitte der LI-Elemente innerhalb eines UL mit CSS

Habe ich eine Serie von LI innerhalb eines UL wie diese:

<ul>
    <li class="section left"></li>
    <li>I want to float this on the left</li>
    <li>I want to float this on the left</li>
    <li>I want to float this on the left</li>
    <li class="section right"></li>
    <li>I want to float this on the right</li>
    <li>I want to float this on the right</li>
    <li>I want to float this on the right</li>
</ul>

Dieser HTML-Code erzeugt, die von php und ich kann nicht verändern, der HTML -, auf der anderen Seite habe ich die Funktion zum zuweisen von Klassen zu einzelnen LI-Elemente. Die UL und LIs enthalten form Elemente, die will ich verteilen in zwei Abschnitte, schwimmende einige Inhalte (einige LIs) auf der linken Seite und einige Inhalte (andere LIs) auf der rechten Seite.

Wenn ich könnte nest ULs innerhalb der wichtigsten UL-dies wäre viel einfacher, die Behandlung der inneren ULs als Blöcke, aber ich kann das nicht hier.

Wie zu erreichen das gleiche Ergebnis mit CSS gegeben, die HTML-Einschränkungen, die oben erwähnt? Ich meine ja, ich könnte weisen floating-Klassen individuell zu jedem LI, aber ich hoffte auf eine elegantere Lösung hier.

danke

InformationsquelleAutor unfulvio | 2012-02-12
  1. 2

    Fügen Sie die folgenden CSS3 code:

    ul{width:100%;list-style:none;}
/* the '~'  (general sibling combinator)
 * selector will select all following siblings in the document tree.
 * This selector is part of the CSS3 selector recommendation,
 * see also http://www.w3.org/TR/selectors/#general-sibling-combinators
 *
*/
li.section.left, li.section.left ~ li{
    background-color:#faa;
    float:left;
    margin-right:1em;
}
li.secton.right , li.section.right ~ li{
    background-color:#afa;
    float:right ;
    margin-left:1em;
    margin-right:0;
}

    Verwenden Sie diese mit deinem vorgeschlagenen code, und Sie werden bekommen, was Sie brauchen (zumindest in anständigen Browsern). JSFiddle Demo /Demo mit kleiner Schriftgröße (siehe Wirkung)

    Update: IE7+ - kompatible version (einfach ohne :not)

    • schöne css, aber das wird brechen viele Browser! esp. <IE10 -.-
    • Sollte funktionieren, zumindest mit dem IE9. Wenn Sie Streifen :not (nicht notwendig, wie oben beschrieben), funktioniert es auf IE7+, FF3+ Saf4+, Chrome4+ Opera10.10+... (siehe quirksmode.org/css/contents.html#t30)
    • Ich Wette meine Oma, dass sibling combinator funktioniert nicht im IE7! Es zerstört mein ganzes Bild von IE;)
    • Bitte testen Sie den obigen code in IE7, machen Sie einen screenshot und schicken Sie es an quirksmode :D. Aber ich werde es nicht glauben, da IE7 kann nicht mit den nächsten sibling-Selektor +... Aber falls wir beide falsch sind... Arme Oma. Werde hart arbeiten, in der Microsoft Minen :D.
    • gut, vielleicht meine Oma, die dort arbeiten, eine gute Sache wäre, und MS schließlich holt in browserdevelopment mit Ihr als CTO >.<
    • +1, nicht wissen, bout diese Auswahl (noch) 🙂
    • Siehe CSS-level-3-Selektoren, Selektoren Stufe 4 und der quirskmode Kompatibilität charts (css-4 noch nicht enthalten).

    InformationsquelleAutor Zeta
  2. 2

    Nicht sicher, wie genau Sie wollen die Liste zu schauen... Aber wenn Sie zuweisen können, einen Recht Klasse auf die Elemente der Liste, können Sie die CSS-entlang der Linien, die unten gezeigt zu positionieren:

    <html>
<head>
    <style>
        li {width:300px; list-style-position:inside;}
        li.right {background:pink; text-align:right; direction:rtl;}
    </style>
</head>
<body>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li class="right">Item 3 -- right</li>
        <li>Item 4</li>
        <li class="right">Item 5 -- right</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ul>

</body>
</html>
    • +1 klar und einfach
    InformationsquelleAutor jim31415
  3. 1

    Hm, etwas schwierig.
    Ist die Menge der Elemente, die befestigt?

    Wenn also, erste Sache, die kommt auf Gedanken-ist mit dem benachbarten Geschwister-Selektor (+). 

    li.section.left,
li.section.left + li,
li.section.left + li + li,
li.section.left + li + li + li {
    float: left
}

    Gleiche für die float-Recht-Elemente ...
    Ansonsten würde ich versuchen und verwenden Sie jquery um die Elemente und Klassen zuweisen, um Sie.

    InformationsquelleAutor Yoeri
  4. 0

    Ich denke, die beste Lösung für dieses Problem ist das erstellen der Liste, die Sie haben, wie diese:

    <div>
    <ul>
        <li>I want to float this on the left</li>
        <li>I want to float this on the right</li>
        <li>I want to float this on the left</li>
        <li>I want to float this on the right</li>
        <li>I want to float this on the left</li>
        <li>I want to float this on the right</li>
    </ul>
</div>

    Dann in der CSS gibst du alle LI ein float left und style Sie.(Ich meine die Breite, Höhe und so weiter)
    Danach bauen Sie ein kleines div um es und geben Sie es ein max und Sie wollen, Sie werden (werden Sie sicher, dass der LI passen Sie innerhalb es in den Zeilen 2.)

    Könnte dies eine Lösung sein, aber ich weiß nicht, wie viel HTML können Sie verändern.

    InformationsquelleAutor Controvi
Schreibe einen Kommentar