排列一些图标的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 来关闭 float 到 LI 样式，如下所示。

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