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

Posted 2023-02-22

【中文标题】列表内的 CSS 浮动避免不必要的填充

【英文标题】：CSS float inside the list avoid unwanted padding

【发布时间】：2018-07-03 23:19:08

【问题描述】：

在我的列表元素中，我想将控制按钮放在一旁，从列表项文本的左侧开始。为了做到这一点，我使用了一个属性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_____________________________________更新___删除

【问题讨论】：

在 Bootstrap 4 中，像这样的简单工作可以在没有任何 css hack 的情况下完成。 float: left; 在我的书中是 css hack，因为 Bootstrap 4 允许仅使用本机类完成几乎所有事情。但我需要查看完整的 HTML 输出 sn-p 才能知道在这种情况下您需要哪个 Bootstrap 类。

Bootstrap 4 中不必要的 css hack 的一个后果是 css hack 需要更多的 css hack 来解决原始 css hack 造成的问题...

【参考方案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>

【讨论】：

或者，可以使用<span style="float: left; clear:left;"> 代替clearfix。

【参考方案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/

【讨论】：

按照同样的思路，如果正在使用引导程序（取决于哪个版本）clearfix 元素上的简单类 li 将提供解决浮动问题的结构。

@ClosDesign, float:left; clear:left li 级别无助于解决问题，而 clearfix li 和 float:left; span 级别效果很好。或者也可以在li 级别上使用clear:left，在span 级别上使用float:left;。