Question

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

该列表基于Vue.js＆amp;引导。我的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

尝试style =“clear：left;”。如果这不起作用，你实际上会在'li'元素上执行float或clear left，而不是在包含按钮的span上。这样，包含按钮的每个'li'将包含按钮本身。

尝试下面的效果。由于没有JS小提琴，因此编辑代码可以更难以编辑。

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

Answer 2

您的问题应该通过重置或清除您创建的浮动来解决。在使用引导程序时，只需将类clearfix添加到已添加float的li元素即可。这将添加一个伪后元素，它将在元素后重置平面。

最终的代码段：

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

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

2 个答案: