html - CSS float 在列表中避免不必要的填充

Question

在我的列表元素中，我想将控制按钮放在列表项文本左侧的旁边。为了做到这一点，我使用了一个属性 float: left;，它完成了这项工作，但是当列表中有多于一行时，每个新行的填充量都是前一行的大小 float block :

该列表基于 Vue.js 和 Bootstrap。 我的 CSS/HTML 代码:

<ul class="items">
   <transition-group name="item">
      <li v-for="item in items" :key="item.id" mode="out-in">
         <span>
            {{item.properties.NAME}}
         </span>
         <span style="float: left;">
            <a href="#" class="btn btn-success btn-xs" @click="edit_item(item)"><span class="fa fa-wrench"></span>Update</a>
            <a href="#" class="btn btn-danger btn-xs" @click="confirm_delete_item(item)"><span class="fa fa-trash-o"></span>Delete</a>
         </span>
      </li>
   </transition-group>
</ul>

如何在列表的右侧/左侧显示列表内的按钮，一个接一个地显示？

最终结果应该是这样的:

• 元素#1____________________________________更新___删除
• 元素#2____________________________________更新___删除

Answer 1

您的问题应该通过重置或清除您创建的 float 来解决。当您使用 bootstrap 时，您只需将类 clearfix 添加到已添加 float 的 li 元素即可。这将添加一个伪 after 元素，该元素将重置该元素之后的平面。

最终代码片段:

<ul class="items">
   <transition-group name="item">
      <li v-for="item in items" :key="item.id" mode="out-in" style="padding-bottom:10px;" clearfix>
         {{item.properties.NAME}}
         <span style="float: left;">
            <a href="#" class="btn btn-success btn-xs" @click="edit_item(item)"><span class="fa fa-wrench"></span>עדכן</a>
            <a href="#" class="btn btn-danger btn-xs" @click="confirm_delete_item(item)"><span class="fa fa-trash-o"></span>מחק</a>
         </span>
      </li>
   </transition-group>
</ul>