how to position links at the bottom in a fixed height list
I would like to have a menu with an height of 100px with separators. I've put my menu in a unordered list and added a border-right to the li. So far so good but I can't find how to align my links at the bottom ?
HTML
<div id="menu">
<ul>
<li id="logo"></li>
<li><a href="#item-1" class="first">Item 1</a></li>
<li><a href="#item-2">Item 2</a></li>
<li><a href="#item-3">Item 3</a></li>
<li><a href="#item-4">Item 4</a></li>
<li>&l开发者_高级运维t;a href="#item-5">Item 5</a></li>
</ul>
</div>
CSS
#menu {
background:#5a5a5a;
height:100px;
left:0px;
position:fixed;
top:50px;
width:100%;
}
#menu ul {
list-style-image: none;
list-style-type: none;
margin:0px;
}
#menu li {
border-right:1px solid #c6c6c6;
display:inline-block;
height:100px;
}
#menu ul li a {
color:#fff;
line-height:100px;
margin:0 10px;
padding:0 15px;
text-decoration:none;
vertical-align:bottom;
}
#menu ul li a:hover {
background:#c6c6c6;
color:#fff;
}
Thanks
I've always disliked the inline-block
method, so I'm using floats for this instead. See if this is what you want (I've taken the liberty of making the anchors expand out to the size of the list items). http://jsfiddle.net/gSMVA/
The code:
#menu {
background: #5a5a5a;
height: 100px;
left: 0px;
position: fixed;
top: 50px;
width: 100%;
}
#menu ul {
list-style: none;
margin: 0px;
}
#menu li {
border-right: 1px solid #c6c6c6;
height: 100px;
float: left;
}
#menu ul li a {
color:#fff;
padding: 0 25px;
height: 100px;
display: block;
text-decoration:none;
/* Height * 2 - font size */
line-height: 188px;
font-size: 12px;
}
#menu ul li a:hover {
background: #c6c6c6;
color: #fff;
}
#menu li {
border-right:1px solid #c6c6c6;
display:inline-block;
height:20px;
padding-top:80px
}
#menu ul li a {
color:#fff;
line-height:20px;
margin:0 10px;
padding:0 15px;
text-decoration:none;
精彩评论