列表内的 CSS 浮动避免不必要的填充

Question

在我的列表元素中，我想将控制按钮放在一旁，从列表项文本的左侧开始。为了做到这一点，我使用了一个属性float: left;，它可以完成这项工作，但是当列表中有不止一行时，每个新行都有一个与前一个浮动块大小相同的填充：

该列表基于 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

您的问题应该通过重置或清除您创建的浮动来解决。当您使用引导程序时，您可以简单地将类 clearfix 添加到您已添加 float 的 li 元素中。这将添加一个伪 after 元素，该元素将重置该元素之后的平面。

最终代码sn-p：

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

Answer 2

试试 style="clear:left;"。如果这不起作用，您实际上会在“li”元素上执行浮动或清除左侧，而不是在包含按钮的跨度上。这样，每个包含按钮的“li”都将包含按钮本身。

在下面尝试一些对此产生影响的东西。由于没有 JS Fiddle，因此根据您的需要编辑代码就更难了。

<ul class="items">
<transition-group name="item">
  <li v-for="item in items" :key="item.id" mode="out-in" style="float:left; clear:left; width:100%; display:block">
     <span>
        {{item.properties.NAME}}
     </span>
     <span>
        <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> 

有点像这样。又快又脏。除了在元素上，强烈推荐 CSS，而不是内联样式。

https://jsfiddle.net/y1x53zx2/1/