display inline listings (li) from right in HTML

Question

Here is the scenario:

<div class="menu">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>

and CSS:

.menu li {display:inline}

The results would be:

1  2  3

but I want to display them from right to left:

3  2  1

How can I achieve this please?

Thanks @Pow-Ian, surely I can but in this case I was looking for some other way. — Zim3r, Oct 26 '12 at 13:50
@raina77ow Sorry I didn't know it's necessary because it works fine this way. I'll edit my post. — Zim3r, Oct 26 '12 at 13:52

score 2 · Answer 1 · answered Oct 26 '12 at 13:38

2

Try adding float: right to the CSS

.menu li {display:inline; float: right;}

You may need to add additional restrictions to prevent the list flying to the right side of the page

answered Oct 26 '12 at 13:38

cowls

24,013
8
48
78

score 2 · Answer 2 · answered Oct 26 '12 at 13:40

2

First, you need to wrap your <li>s with a <ul> tag, not a <div>.

li {
  list-style: none;
  float: right;
}
ul{
  float: left;
}

Fiddle

answered Oct 26 '12 at 13:40

Scrimothy

2,536
14
23

score 2 · Answer 3 · answered Jun 11 '13 at 05:18

2

Try this one

CSS Code:

.menu li {display:inline}
.menu ul{direction:rtl;}

HTML Code:

<div class="menu">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>

Demo

answered Jun 11 '13 at 05:18

ays

57
5

score 1 · Answer 4 · answered Oct 26 '12 at 13:39

1

Why don't you re-arrange them? Changing the order of list elements is not a matter of presentation so it shouldn't be handled by CSS, but by HTML.

By the way you forgot to wrap your li's inside a a ul tag.

<ul>
  <li></li>
</ul>

answered Oct 26 '12 at 13:39

Agis

32,639
3
73
81

score 1 · Accepted Answer · answered Oct 26 '12 at 13:40

1

ul {
    width: 50px;
}
li {
    display: inline-block;
    float: right;
}

Also, you can't have li being the direct descendents of a div. Use ul or ol

Demo

answered Oct 26 '12 at 13:40

bookcasey

39,223
13
77
94

score 1 · Answer 6 · answered Oct 26 '12 at 13:42

using the new reversed attribute of HTML5, you can tell the browser that the numbering for the list items should display in descending order, instead of the default ascending.

<ol reversed>  
    <li>List item one</li>  
    <li>List item two</li>  
    <li>List item three</li>  
    <li>List item four</li>  
    <li>List item five</li>  
</ol>

display inline listings (li) from right in HTML

6 Answers6