When organizing my list element, I want to position the control buttons next to the left of the list item text. To achieve this layout, I have applied the CSS property float: left;. However, a problem arises when there are multiple lines in a list - each new line ends up with padding related to the previous floated block:
https://i.sstatic.net/NhVsO.png
This particular list is built using Vue.js and Bootstrap. Below is the snippet of 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 can I align the buttons inside the list to appear one under the other on either the right or left side?
The desired outcome should resemble something like this:
- Item #1_____________________________________Update___Delete
- Item #2_____________________________________Update___Delete