it-swarm.com.de

Ist es möglich, die Reihenfolge der Listenelemente mit CSS3 zu ändern?

Ist es möglich, die Reihenfolge der Listenelemente mit CSS3 zu ändern?

Zum Beispiel, wenn eine Liste in HTML in der Reihenfolge 1,2,3,4,5 codiert ist, ich aber möchte, dass sie in der Reihenfolge 5,1,2,3,4 angezeigt wird.

Ich verwende ein CSS-Overlay, um eine Firefox-Erweiterung zu ändern, sodass ich nicht einfach den HTML-Code ändern kann.

HTML Quelltext

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
7
RockPaperLizard

Sie können es mit Flexbox tun.

Hier ist eine Geige, die ich für Sie erstellt habe: https://jsfiddle.net/x56hayht/

ul {
  display: flex;
  flex-direction: column;
}
ul li:first-child {
  order: 5;
}
ul li:nth-child(2) {
  order: 4;
}
ul li:nth-child(3) {
  order: 3;
}
ul li:nth-child(4) {
  order: 2;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Laut csstricks:

Die Auftragseigenschaft ist eine Untereigenschaft des Moduls Flexible Box Layout.

Flex-Elemente werden standardmäßig in derselben Reihenfolge angezeigt, in der sie im Quelldokument angezeigt werden. 

Die Bestellungseigenschaft kann verwendet werden, um diese Reihenfolge zu ändern.

Syntax:

reihenfolge: number

Ich hoffe es hilft. Prost!

17
devhermluna

Ja, Sie können die order css-Eigenschaft des flexiblen Boxmodells verwenden. Beachten Sie, dass für das übergeordnete Element display:flex festgelegt sein muss

ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  
  -moz-flex-flow: wrap;
  -webkit-flex-flow: wrap;
  flex-flow: wrap;
}
ul li {
  width: 100%
}
ul li:nth-of-type(1) {
  order: 2;
}
ul li:nth-of-type(2) {
  order: 3;
}
ul li:nth-of-type(3) {
  order: 4;
}
ul li:nth-of-type(4) {
  order: 5;
}
ul li:nth-of-type(5) {
  order: 1;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Beachten Sie außerdem, dass nicht alle Browser das hier beschriebene flexible Boxmodell unterstützen ... http://caniuse.com/#feat=flexbox

Es gibt jedoch einige Polyfills, mit denen Sie ältere Browser unterstützen können, wenn Sie ältere Browser unterstützen müssen

2
Leo

Wenn Sie nur umkehren möchten, verwenden Sie:

ul {
    display: flex;
    flex-direction: column-reverse;
}
1
a_vedenin