Can I make list items look like a stack

Question

Normally, floating HTML elements flow from left to right and falls on the next line if the width of the container reached.

I want to know, if there is any way by which I can make them float in the bottom. I mean the elements should stack upwards on one another.

I think this example would make it clear http://jsfiddle.net/duGVa/

The element falling on the next line, i.e. LI-6, should be on the top of other 5 elements. and the elements 1-5 should touch to the bottom of the container UL.

Thank you.

enter image description here

as per i understand may be that's you want http://stackoverflow.com/questions/8092830/i-want-to-show-list-items-as-2-or-more-columns-dynamic-alignment/8092856#8092856 — sandeep, Jul 12 '12 at 12:12
no no, wait, I ll post an image which will explain it more clearly — Salman, Jul 12 '12 at 12:14
I understand your question, But I think we can't achieve it by simply using css but might be in javascript/jQuery. — Ahsan Khurshid, Jul 12 '12 at 12:15
I can think of one solution, which is to add 5 different ULs and add elements in them one by one. but that will require too much processing. It would be nice if we can get some better ideas — Salman, Jul 12 '12 at 12:19

meouw · Answer 1 · 2012-07-13T18:39:53.167

4

You can cheat horribly...

use CSS transforms to invert both the UL and the LIs and you'll have the result you want.

ul {
    width: 500px;
    height: 100px;
    background: #def;
    list-style-type: none;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv();
}

li {
    background: #aaa;
    width: 50px;
    height: 40px;
    float: left;
    margin: 5px 25px;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv();
}

see this fiddle (tested in firefox, chrome)

edited Jul 13 '12 at 18:39

answered Jul 12 '12 at 12:36

meouw

41,754
10
52
69

Works, but remember to include `-ms-transform` for IE9+, and `transform` for when standards are agreed upon and made standard. Also may want to include `-o-transform` and any others that may exist. – Niet the Dark Absol Jul 12 '12 at 12:41
Wow thanx.. Awesome solution. Anyways, I don't need to support less than IE8 – Salman Jul 12 '12 at 12:42
Nooooo. its messing up the things.. these elements are in a JQ UI Sortable list, and has a background image of icons. transforming it inverts the icons and dragging the sortable item goes upwards on dragging the mouse down – Salman Jul 12 '12 at 12:46
@meouw: +1 for good suggestion, Kindly add `filter: flipv();` for IE support also. And kindly Update Demo link with this link: http://jsfiddle.net/bNKY3/9/ It will work on cross browser now. – Ahsan Khurshid Jul 13 '12 at 04:34
@Sven: It will work in IE7- IE8 too by using `filter: flipv();` See my comment. – Ahsan Khurshid Jul 13 '12 at 04:35
@A.K What to do about the draggable problem? the dragging goes in reverse direction.. – Salman Jul 13 '12 at 05:07
Updated to accommodate more browsers as per comments from Kolink and A.K – meouw Jul 13 '12 at 18:42

score 0 · Answer 2 · answered Jul 12 '12 at 12:27

0

You have to pragmatically manage to achieve something like this:

<ul>
    <li>LI 6</li>
</ul>
<ul>
    <li>LI 1</li>
    <li>LI 2</li>
    <li>LI 3</li>
    <li>LI 4</li>
    <li>LI 5</li>
</ul>

Check this

answered Jul 12 '12 at 12:27

Vishal Suthar

17,013
3
59
105

score 0 · Answer 3 · answered Jul 12 '12 at 12:36

Placing your list in a division <div> can make it act as a unit.

Then using CSS you can force each list item <li> to be centered.

Finally, to make sure each list item <li> line up with one another you can set their width to be the same with CSS.

That should appear as a stack. Here is an example..

<style type='text/css'>
#stack{
align: left;
}
#stack > ul {
align: center;
}
#stack > ul > li{
align: center;
width: 80px;
border: 2px solid black;
text-decoration: none;
}
</style>

<div id="stack">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

score 0 · Answer 4 · answered Jul 13 '12 at 05:07

I Appreciate meouw for his good answer mentioned below

Quoted by meouw

/* Only showing mozilla and webkit transforms */
ul {
    width: 500px;
    height: 100px;
    background: #def;
    list-style-type: none;
   -moz-transform: scaleY(-1);
   -webkit-transform: scaleY(-1);
}

li {
    background: #aaa;
    width: 50px;
    height: 40px;
    float: left;
    margin: 5px 25px;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
}

But here is the Cross Browser Solution:

/* For All browsers : Chrome. Firefox, Mozilla, IE7+(tested), Opera */

ul {
    width: 500px;
    height: 100px;
    background: #def;
    list-style-type: none;
    -moz-transform: scaleY(-1); /* for Mozilla */
    -webkit-transform: scaleY(-1); /* for Webkit Safari/Chrome*/
    -o-transform: scaleY(-1); /* for Opera*/
    -ms-transform: scaleY(-1); /* for IE9 + */
    filter: flipv(); /* for IE9 below */
}

li {
    background: #aaa;
    width: 50px;
    height: 40px;
    float: left;
    margin: 5px 25px;
    -moz-transform: scaleY(-1); /* for Mozilla */
    -webkit-transform: scaleY(-1); /* for Webkit Safari/Chrome*/
    -o-transform: scaleY(-1); /* for Opera*/
    -ms-transform: scaleY(-1); /* for IE9 + */
    filter: flipv(); /* for IE9 below */
}

For IE 9 Below you may use filter: flipv(); See Reference

This solution is acceptable only if it does not mess up the draggable. as I said, JQ draggable is getting reversed. i.e. dragging the mouse in upward direction moves the item towards bottom. — Salman, Jul 13 '12 at 06:16
Yes I saw that, As am I not good in programming logic but might be we can do it with jQuery, See this demo: http://jsfiddle.net/akhurshid/bNKY3/55/ it might be helpful — Ahsan Khurshid, Jul 13 '12 at 06:23
The "horrible cheat" of meouw is getting even horrifying.. lolzz.. Then I'd stick to the idea of adding the elements in columns and making all columns connected sortable. — Salman, Jul 13 '12 at 06:39

Can I make list items look like a stack

4 Answers4