使用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;}