Question

我遇到了排队一些图标的问题，并且我已经足够新了，因为我不确定如何解释这个问题。所以我附上了一张外观呈现的图片。我还包括了css和html代码。希望有人可以帮我指出正确的方向来帮助解决这个问题。

我希望右边的所有“edit”，“archive”，“delete”图标与图片中的第一行完全相同。

这是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

将此添加到您的CSS：

ul#nav div{
  overflow: hidden;
}

它的要点是你的浮动元素将你的div的高度减少到0.如果你将overflow: hidden添加到div，那么元素将被强制包含浮动元素，因此具有正高度。

Answer 2

解决此问题的最简单方法是通过向LI样式添加clear来关闭浮动，如下所示。

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

css问题排队一些图标

2 个答案: