Ändern Sie die Reihenfolge der geschachtelten Liste

-5

Hallo und vielen Dank für die Überprüfung.Ändern Sie die Reihenfolge der geschachtelten Liste

ich habe eine Liste, die mehrere Verschachtelungen hat. Ich möchte die Reihenfolge dieser beiden Listen ändern und ich frage mich, ob dies nur mit CSS möglich ist?

Liste Artikel 1
Liste Artikel 2
- Liste item 2.1
- Liste item 2,2
Liste Artikel 3

i ändern möchten die Bestellung an:

Liste Artikel 1
Liste Artikel 2
Liste Artikel 3
Liste item 2.1
Liste item 2,2

, da die Länge der Liste dynamisch ist, ich kann‘ t verwenden absolute Positionierung oder solche Sachen.

Quelle

2016-11-01 honk31

warum youtag diese Flexbox mit tat? verwendest du flexbox? Wie ist dein Markup? Dein CSS? – DaniP

Hmm, wenn die Liste dynamisch ist, warum nicht im Code anstatt in CSS ändern? Ich habe keine Ahnung, ob CSS das tun könnte, aber es ist sicherlich nicht das, wofür es da ist. – Mackan

Wenn Sie 'flexbox' verwenden, können Sie' '' verwenden, um das 'li' mit der Unterliste zu verschieben. Sie können die' li' jedoch nicht in die übergeordnete Liste verschieben. Warum willst du das machen? Bitte teilen Sie Ihren Code mit, was Sie bisher versucht haben. –

Nein, das geht nicht. Sie müssen diese Daten dort, wo sie gerendert werden, auf der Client-Seite (Javascript) oder der Rückseite bestellen; css ist in diesem Fall hilflos

Quelle

2016-11-01 13:44:10

In einigen spezifischen Situationen kann CSS das tun https://jsfiddle.net/m8k1g0vy/ – DaniP

ja, aber wenn es viele Unterlisten gibt, sollten Sie für jeden von ihnen CSS Bestellung schreiben. Deshalb ist es besser, Daten zu bestellen und dann zu rendern. –

Ich habe nie gesagt, welche Option besser ist. Ich streite nur gegen deine * Nein, du kannst nicht. * ... wie ich auf den Kommentar für bestimmte Situationen zeige. – DaniP

Es ist eine knifflige, aber Sie können es auf eine Weise tun, indem Sie CSS Flexbox order Eigenschaft verwenden.

Sie müssen die Eigenschaften der Elemente <ul> und <li> ändern. Sehen Sie sich das Code-Snippet unten an.

body { 
 
    padding: 2em; 
 
} 
 

 
/* Resetting properties of <ul> */ 
 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: disc; 
 
} 
 

 
/* Applying Flex properties to <ul> */ 
 
ul.normal-list { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
/* Changing the order of all the <li>s except the <ul> with the class 'nested-list' */ 
 
li.nested-list { 
 
    order: 1; 
 
}

<ul class="normal-list"> 
 
    <li>List Item 1</li> 
 
    <li>List Item 2</li> 
 
    <li class="nested-list"> 
 
    <ul> 
 
     <li>List Item 2.1</li> 
 
     <li>List Item 2.2</li> 
 
    </ul> 
 
    </li> 
 
    <li>List Item 3</li> 
 
    <li class="nested-list"> 
 
    <ul> 
 
     <li>List Item 3.1</li> 
 
     <li>List Item 3.2</li> 
 
    </ul> 
 
    </li> 
 
    <li>List Item 4</li> 
 
</ul>

Quelle

2016-11-01 13:59:52

@Paulie_D Vielen Dank! um auf den Fehler hinzuweisen, mein Schlechter! Ich habe meine Antwort aktualisiert und ich denke, dass dies den Job recht gut machen kann. –

Ändern Sie die Reihenfolge der geschachtelten Liste

Antwort

Verwandte Themen