Render horizontal list items starting at the bottom

0
votes

How can I create a multi-row unordered list with the bottom row containing the full width of list items?

Normally it renders in this way:

Item1 Item2 Item3 Item4 Item5 Item6 Item7

Item8 Item9

How can I achieve the following?

Item8 Item9

Item1 Item2 Item3 Item4 Item5 Item6 Item7

What I have tried in CSS is:

.footer { width: 500px; overflow: hidden; background-color:#ccc; }
.footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
.footer ul li { position: relative; float: left; display: block; right: 50%; }
2
csslist
Which language are you using and what have you tried? – Christian Hagelid
Just updated the post with more info. Not sure whether I can do this with a UL – Elena Sutula

2 Answers

1
votes

Without absolutely-positioning the elements, unordered lists cannot do what you want. The elements can only appear in the order they were rendered in the HTML.

0
votes

Maybe you can try to render the ul as "display: table cell", so you can use "vertical-align: bottom" - but I don't know, if it would work. I've done this successfully with DIV-Tags. Keep in mind to render the "li"-Tags as well, may as "display: inline" ... Good luck!

Okay, it worked :)

<ul style="display: table-cell; width: 200px; height: 250px; vertical-align: bottom;">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

Will give you a list, which starts on the bottom of the defined area (width x height) of the ul.

NOTE: It doesn't work, if the "ul" has the "Position: absolute" attribute. If you need that, try to wrap another element, like a "div" around the ul.