CODEWITHSUNDEEP
htmlcss
FrankHults
FrankHults

Reputation: 33

Reverse <ul> ordering using CSS 2.1

I’m attempting to reverse the order of an unordered list using only CSS 2.1

The desired ordering is: Introduction – History – National Flags – Maritime signal flags

I have previously solved this using CSS rotations however this will not longer be CSS 2.1 compatible.

Thanks, Frank

Upvotes: 3

Views: 2792

Answers (3)

Giorgio
Giorgio

Reputation: 38

You can also use this code. It works as I just tested on codepen:

#Header #Navigation ul { display: flex; flex-direction: row-reverse; }

#Header #Navigation li.intro { order: 4; }
#Header #Navigation li.history { order: 2; }
#Header #Navigation li.national { order: 1; }
#Header #Navigation li.inter { order: 3; }

I'm not sure if that suits your needs of keeping CSS 2.1 though

Upvotes: 0

t.niese
t.niese

Reputation: 40842

I would use inline-block instead of float:

#Header #Navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #5D2C2C;
  text-align: right;
}

#Header #Navigation li {
   display: inline-block;
}

That way the order would not be reversed.

Upvotes: 0

Wowsk
Wowsk

Reputation: 3675

A neat trick is to set the parent ul to a flex box and then use the property flex-direction: column-reverse;

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

Upvotes: 3

Related Questions