How Can I Positioning Li Elements To The Bottom Of Ul List

I have menu items like: Row1 Row2.. RowN and I want them not to be that wide - that's why including breaks (with max-width) I have this HTML:

• Ro

Solution 1:

Use display: inline-block instead of float:

ul.menu
{                 
   vertical-align: bottom;
}

ul.menuli
{    
   display: inline-block;
   text-align: center;
}

EDIT: Added text-align: center;. If I understand your comment correctly, that is what you want. If not, you'll need to be more specific.

Solution 2:

http://css-tricks.com/what-is-vertical-align/ This link might help, alternatively you could create the result as table based content with the content aligned to the bottom of each cell.

Solution 3:

Assuming that following is your html

<div>
    <ul>
        <li><a>Row1</a></li>
        <li><a>Row1 Row2 Row3</a></li>
        <li><a>Row1</a></li>
        <li><a>Row1 Row 2</a></li>
    </ul>
</div>

You can simply style your CSS as following

li {
    position:relative;
    float:left;       
}

lia {
    position:absolute;
    bottom:0;
}

Above code should work across browsers (I have not tested this across browsers)

Share