如何修复水平菜单的垂直对齐方式？

Question

我遇到垂直对齐问题;当我希望它位于底部时，它与顶部对齐：

我的 HTML 代码是：

<div id="hor_menu">
<img src="header.jpg" border="0" style="float:left" width="200px" height="80px"/>
  <ul>
    <li><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">Home</a></li>
    <li class="current"><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">News</a></li>
    <li><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">Products</a></li>
    <li><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">About</a></li>
    <li><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">Contact</a></li>
  </ul>
</div>

我的 CSS 代码是：

body {
  margin:0;
  padding:0;
  }
#hor_menu *{
  margin:0;padding:0
  }
#hor_menu {
  float:left;
  width:100%;
  background: #000 url('bg.jpg') repeat-x bottom;
  font-family:Arial;
  font-size:15px;
  }
#hor_menu ul {
  list-style:none;
  }  
#hor_menu li {
  float:left;
  }  
#hor_menu a {
  display:block;
  padding:5px 13px;
  text-decoration:none;
  color:#fff;
  }
#hor_menu a:hover {
  background: #000 url('bg_hover.jpg') repeat-x bottom;
  }
#hor_menu .current a{
    border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -khtml-border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -khtml-border-top-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
  background: #fff url('bg_current.jpg') repeat-x top;
  color:#000;
  }

注意：上面的代码没有任何尝试与底部对齐。

Answer 1

解决此问题的一种方法是使用display:inline-block; vertical-align:bottom。

#hor_menu ul, #hor_menu img {
    vertical-align: bottom;
    display: inline-block;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1
}

请参阅： http://jsfiddle.net/thirtydot/XYrWZ/3/