Search code examples
htmlcssvue.jsbootstrap-4

CSS float inside the list avoid unwanted padding

In my list element I want to place the control buttons aside, from the left of the list item text. In order to do that I use a property float: left;, it does the job, but when there are more than one line in a list, every new line has a padding of a size of the previous floating block:

enter image description here

The list is based on Vue.js & Bootstrap. My CSS/HTML code:

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

How to display buttons inside the list on the right/left side of the list just one under the other?

The final result should be something like that:

  • Item #1_____________________________________Update___Delete
  • Item #2_____________________________________Update___Delete
Solution

  • Your issue should be solved by resetting or clearing the float that you’ve created. As you’re using bootstrap you can simply add the class clearfix to your li element that you have added float to. This will add a pseudo after element which will reset the flat after the element.

    The final code snippet:

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