Question

当我显示存储在<li>标记内的隐藏div时，图标会向下推到<li>的底部。我该如何防止这种情况？

这是HTML：

<ul>
<li>Utah
   <ul>
      <li>Park City
         <ul>
             <li>Park Cat 1
                  <div><img class="portf_edit" /></div>
                  <div><img class="portf_archive" /></div>
                  <div><img class="portf_delete" /></div>
             </li>
             <li>Skiing
                  <div><img class="portf_edit" /></div>
                  <div><img class="portf_archive" /></div>
                  <div><img class="portf_delete" /></div>
             </li>
         </ul>
      </li>
   </ul>
</li>
</ul>

这是li css：

li {
list-style-type:none;
vertical-align: top;
list-style-image: none;
left:0px;
text-align:left;
clear: both;
}
.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_problem1.jpg

这是展开前的屏幕截图，显示图标被推送到的位置：

alt text http://www.redsandstech.com/css_layout_problem2.jpg

Answer 1

您需要使<li>与图像一样高。

<li class="with-icons">Skiing
    <div><img class="portf_edit" /></div>
    <div><img class="portf_archive" /></div>
    <div><img class="portf_delete" /></div>
</li>

和

li .with-icons {
    height: 32px; // adjust according to your image size
}

您也可以省略每张图片周围的div。不确定它们是否必要。

Answer 2

如果您正确浮动EDIT / ARCHIVE / DELETE按钮，请在文本之前指定它们。像这样：

<li>
   <div><img class="edit" /></div>
   <div><img class="archive" /></div>
   <div><img class="delete" /></div>
   Park Cat 1
</li>

此外，您可能需要在LI上指定宽度;像“100％”这样的东西。

相对于列表项的图标放置

2 个答案: