css問題排列一些圖標

Question

我有一個問題排隊一些圖標，我已經足夠新的CSS，我不完全確定如何解釋這一點。所以我附上了一幅關於輸出渲染的圖片。我還包括了CSS和HTML代碼。希望有人能幫助我指出正確的方向來幫助解決這個問題。

我想要的「編輯」，「歸檔」，「刪除」圖標，在右側完全一樣，畫面中的第一行中的所有行了。

下面是HTML：

<ul id="nav"> 
<li>California 
    <div class="portf_edit"> 
     <span> 
      <img src="../images/edit.png"> 
     </span> 
    </div> 
    <div class="portf_archive"> 
     <span> 
      <img src="../images/archive.png"> 
     </span> 
    </div> 
    <div class="portf_delete"> 
     <span> 
      <img src="../images/delete.png"> 
     </span> 
    </div> 
</li> 
<li>Hyrum 
    <div class="portf_edit"> 
     <span> 
      <img src="../images/edit.png"> 
     </span> 
    </div> 
    <div class="portf_archive"> 
     <span> 
      <img src="../images/archive.png"> 
     </span> 
    </div> 
    <div class="portf_delete"> 
     <span> 
      <img src="../images/delete.png"> 
     </span> 
    </div> 
</li> 

這裏是CSS：

li { 
list-style-type:none; 
vertical-align: bottom; 
list-style-image: none; 
left:0px; 
text-align:left; 
} 
ul { 
list-style-type: none; 
vertical-align: bottom; 
list-style-image: none; 
left:0px; 
} 
ul#nav{ 
margin-left:0; 
padding-left:0px; 
text-indent:15px; 
} 

.portf_edit{ 
float:right; 
position: relative; 
right:50px; 
display:block; 
} 
.portf_archive{ 
float:right; 
position: relative; 
right:-5px; 
display:block; 
} 

.portf_delete{ 
float:right; 
position: relative; 
right: -60px; 
display:block; 
} 

這裏是正在輸出：alt text http://www.redsandstech.com/css_layout_problem.jpg

任何想法從哪裏開始？謝謝。

Answer 1

解決這個問題的最簡單的方法是通過如下所示添加clear到LI樣式關閉浮子。

li { 
list-style-type:none; 
vertical-align: bottom; 
list-style-image: none; 
left:0px; 
text-align:left; 
clear: both; 
} 

Answer 2

添加到您的CSS：

ul#nav div{ 
    overflow: hidden; 
} 

它的要點是，你的浮動元素減少你的div的高度爲0如果添加overflow: hidden到div則該元素將被強制遏制浮動元件並因此具有正高度。