CODEWITHSUNDEEP
htmlcss
dmonopoly
dmonopoly

Reputation: 3331

How would you use HTML/CSS to order a list "backwards" so the list fills from right-left, bottom up?

Say you specify some div with height 500px. In this div, you have a list - maybe ol or ul - and instead of filling it up left-right, top-bottom (this can be done with display:inline-block on the li element), you want to fill it up right to left, bottom to top.

I think right to left can be done with something like float:right in the li element, but I wonder about going bottom to top?

Example result (elem1 is filled before elem2, etc.):

-----------------------------------
[elem10][elem9][elem8][elem7][elem6]
[elem5][elem4][elem3][elem2][elem1]
-----------------------------------

(So it's kind of like putting blocks on top of each other and sliding to the right.)

I hope I'm overthinking and there's actually an easy way to do this.

Thoughts appreciated.

PS. I've seen ol's new 'reversed' attribute in HTML5 and even if that helps I would prefer avoiding something that has very little browser support right now.

Upvotes: 2

Views: 1002

Answers (6)

Ravinder Kumar Ghanghas
Ravinder Kumar Ghanghas

Reputation: 1

Use the below CSS for reversing from bottom to up:

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

or use the below CSS for reversing from right to left:

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

Upvotes: 0

anoldermark
anoldermark

Reputation: 381

Here's a solution for filling up from bottom to top and aligned right:

#mylist {
    position:absolute;
    top:58px;
    right:4%;
    height:40px;// height of max rows you might need - this allows two rows for me
    line-height:1;
    font-size:14px;
    margin:0;
    border: 1px dashed #38e800;
}
#mylist ul {
    position:absolute;
    bottom:0;
    right:0;
    overflow: hidden;
    vertical-align:bottom;
    list-style: none;
    text-align:right;
    margin:0 0 2px 0;
 }
#mylist li {
    display:inline-block;
    padding:0 0 0 18px;
}

Upvotes: 0

Arg0n
Arg0n

Reputation: 8423

I made a shorter, unformatted version of @vals answer, credit goes to him.

The HTML:

<ul class="reverse">
   <li>one</li>
   ...
</ul>

The CSS:

.reverse {
   position: absolute;
   list-style: none;
}

.reverse li {
   margin: 5px;
   float: left;
}

.reverse,
.reverse li {
   -webkit-transform: rotate(180deg);
}

JSFIDDLE

Upvotes: 0

vals
vals

Reputation: 64164

Just rotate the list and then counter-rotate the li's

the HTML is 

<ul class="container">
<li class="inner">one</li>
....
</ul>

the CSS is 

.container {
    left: 46px;
    top: 100px;
    width: 400px;
    height: 400px;
    position: absolute;
    border: 1px solid black;
    background-color: lemonchiffon;
}

.inner {
    background-color: lightsalmon;
    font-size: 20px;
    margin: 20px;
    width: 80px;
    float: left;
}

.container:hover,
.container:hover li {
    -webkit-transform: rotate(180deg);
    -webkit-transition: all 3s;
}

In the DEMO I have done the effect in the hover, just to make it prettier. the real code would be without transitions :-)

Upvotes: 2

crimson_penguin
crimson_penguin

Reputation: 2778

Only supported by WebKit, but -webkit-writing-mode: horizontal-bt; seems to work: http://jsfiddle.net/zzXhp/

There may be other prefixed properties for it. Obviously it's not very well supported though.

Upvotes: 2

Ali Bassam
Ali Bassam

Reputation: 9959

To show something from right to left (usually pages in Arabic), you should use the dir tag.

dir="rtl" : RIGHT to LEFT

<ul id="myList" dir="rtl">
    <li>1st</li>
    <li>2nd</li>
    <li>3rd</li>
</ul>

Here's a JSFIDDLE

A Simple JavaScript to do the whole work, no rtl required.

var list = document.getElementById("myList");
var i = list.childNodes.length;
while (i--)
  list.appendChild(list.childNodes[i]);

Here's a JSFIDDLE

Upvotes: 0

Related Questions