使用css将文本对齐底部

Question

我有一个带有图像和ul的导航栏。我想在ul中的文本对齐到div的底部，但它现在在右上角。我怎样才能做到这一点？
http://jsbin.com/otitaf/1/

<nav> 
      <div class="logo"> 
       <img src="img/logo.jpg" id="logo"> 
      </div> 
      <div class="nav"> 
       <ul> 
        <li class="bottom"> 
         <a href="home.html">Luigi's ♨ Pizzeria</a> 
        </li> 
        <li> 
         <a href="menu.html">Menu</a> 
        </li> 
        <li class="bottom"> 
         <a href="#">Map</a> 
        </li> 
        <li> 
         <a href="#">About</a> 
        </li> 
        <li> 
         <a href="#">Contact</a> 
        </li> 
        <li> 
         <a href="#">Praises</a> 
        </li> 
       </ul> 
      </div> 
     </nav> 

CSS

.logo{ 
    width: 30%; 
    float: left; 
} 
.nav{ 
    float: right; 
} 
#logo{ 
    height: 100%; 
    margin-left: 25%; 
} 
.bottom{ 
    position: relative; 
    vertical-align: bottom; 
} 

Answer 1

尝试调整UL和定位，是这样的：下面的CSS

#side-bar section ul { 
position: absolute; 
bottom: 30px; 
} 

Answer 2

使用，以实现自己的梦想

#side-bar{ position:relative; } 
#side-bar ul{position: absolute; bottom: 0;}  /* this will apply to all ul available in side-bar 

insted的这个，你也可以加class和id到UL选择它具体，如：

.sidebar-ul{position: absolute; bottom: 0;}