开发者

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;
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜