Horizontal menu (ul/li) with vertical-align: bottom

HTML & CSS
1

Ok, I know I read something on here that says you can only use vertical-align with inline stuff.

Lets say we had this:


<ul>
   <li><a href="#">link</a></li>
   ............
</ul>

Now, to make the li’s be horizontal, you do ‘li { display: inline }’ right?

Well, I am wanting to make the menu ‘bar’ 50px high, but with each <li> (or maybe the <a>, whatever works) aligned to the bottom.

Can this be done? I havn’t been able to get it to work.

2

You would be better off using css as display: block;. Pretty sure that is correct. Hopefully someone can verify this.

3

Well I can’t figure it out with display: block. Anyone able to provide more detail?

Basically, I want a div (or whatever) with a set height, with another div/ul/li (whatever) aligned at the bottom of the parent.

4

Please?

5

Hi,

There are many ways to do this but perhaps the easiest is to simply absolutely place the list on the bottom of the parent.

The parent needs a stacking context which can be done by using position:relative without co-ordinates and this makes it the containing block for the absolutely positioned elements.

You then just place the element at bottom:0 in respect of the parent.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0}
#outer{
height:50px;
background:#ffffcc;
border:2px solid red;
position:relative;/* stacking context for absolutely position ul*/
width:750px;
margin:50px auto;
}
#outer ul{
list-style:none;
position:absolute;
bottom:0;
left:0;
}
#outer li{display:inline;padding:15px;}
 
</style>
</head>
<body>
<div id="outer">
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</div>
</body>
</html>

Theres a similar demo here:

http://www.pmob.co.uk/temp/text-at-bottom3.htm

Hope that helps :slight_smile: