CODEWITHSUNDEEP
htmlcss
user8725518
user8725518

Reputation: 35

displaying the list items in reverse order using css

I am displaying the categories in my web page.Whatever I am adding from backend it is displaying in the list but I need the list in this format.

HTML:

<ul>
 <li>List 1</li>
 <li>List 2</li>
 <li>List 3</li>
 <li>List 4</li>
 <li>List 5</li>
 <li>List 6</li>
 <li>List 7</li>
 <li>List 8</li>
 <li>List 9</li>
 <li>List 10</li>
</ul>

CSS

ul {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

ul > li {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
display:inline-block;
}

Here is my fiddle link

As of now it is displaying as

List10 List9 list8 List7 List6 List5 Lst 4 List3 List2 List1

But for me it should display as in this format

List6 List7 list8 List9 List10
List1 List2 list3 List4 List5

As of now i am having this list in my website

<ul id="legend">
    <li ><span>All</span></li>
    <li ><span>Church</span></li>
    <li ><span>Food </span></li>
    <li ><span>Fund&nbsp;Raisers</span></li>
    <li ><span>Games&nbsp;and&nbsp;Contests</span></li>
    <li ><span>Health&nbsp;and&nbsp;Wellness</span></li>
    <li ><span>Lectures</span></li>
    <li ><span>Movies</span></li>
    <li><span>Music</span></li>
    <li><span>Parades&nbsp;and&nbsp;Festivals</span></li>
    <li ><span>Seniors</span></li>
    <li><span>Sports</span></li>
    <li><span>Theatrical </span></li>
    <li><span>Visual&nbsp;Arts</span></li>
</ul>

Output should be as

HealthandWellness Lectures Movies Music ParadesandFestivals
ParadesandFestivals seniors sports Theatrical Visual Arts
All Church food fundraisers games

Upvotes: 0

Views: 5640

Answers (4)

Nofar Eliasi
Nofar Eliasi

Reputation: 109

ul {
list-style-type: none;
direction:rtl;
}
.abc{
text-align:right;
display:inline-block;
}
.lineB{
float:right;
}
.lineA{
float:left;
}
<!DOCTYPE html>
<html>
<body>
<div class="abc">
<ul>
    <li class="lineB">List 1</li>
    <li class="lineB">List 2</li>
    <li class="lineB">List 3</li>
    <li class="lineB">List 4</li>
    <li class="">List 5</li>
    <li class="lineA">List 6</li>
    <li class="lineA">List 7</li>
    <li class="lineA">List 8</li>
    <li class="lineA">List 9</li>
    <li class="lineA">List 10</li>
</ul>
</div>

</body>
</html>

Upvotes: -1

Nawaz Ghori
Nawaz Ghori

Reputation: 591

you have to split the list and arrange them by using order property. Here I have used width as 20% because you have 5 elements in the first row 

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

li:nth-child(n+6) {
  order: 1;
}
   
li {
  width: 20%;
  order: 2;
}
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
  <li>List 6</li>
  <li>List 7</li>
  <li>List 8</li>
  <li>List 9</li>
  <li>List 10</li>
</ul>

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

If you only want to reverse the order, you could use the direction property

ul {
  direction: rtl;
  text-align: left;
}
li {
  display: inline;
}
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
  <li>List 6</li>
  <li>List 7</li>
  <li>List 8</li>
  <li>List 9</li>
  <li>List 10</li>
</ul>

But if you want to change it like this:

List6 List7 list8 List9 List10 List1 List2 list3 List4 List5

You should use flex:

ul {
  list-style: none;
  display: flex;
}
li {
  order: 2;
}
li:nth-child(n+6) {
  order: 1;
}
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
  <li>List 6</li>
  <li>List 7</li>
  <li>List 8</li>
  <li>List 9</li>
  <li>List 10</li>
</ul>

EDIT

As commented, you are looking for two rows:

List6 List7 list8 List9 List10
List1 List2 list3 List4 List5

Then this should work:

Note that you need to define a width to the list-items to make the flex-wrap to work.

ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
li {
  width: 20%;
  order: 2;
}

li:nth-child(n+6) {
  order: 1;
}
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
  <li>List 6</li>
  <li>List 7</li>
  <li>List 8</li>
  <li>List 9</li>
  <li>List 10</li>
</ul>

Upvotes: 4

Pasha
Pasha

Reputation: 13

Use Flex-box. It is simply the simple. For reverse just:

ul{display:flex; flex-direction:row-reverse; }

For order u can use Flex-order:

ul {display:flex; } ul > li {flex:1; order:2;}

I have just creat a samples.

  1. for reverse: https://css-tricks.com/almanac/properties/f/flex-direction/
  2. for order: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Upvotes: 1

Related Questions