时间戳

首页 > 解决方案 > 在同一垂直水平上的 Li 旁边有按钮

html - 在同一垂直水平上的 Li 旁边有按钮

问题描述

如何对齐列表中所有 Li 旁边的按钮并使其垂直内联。

这是问题所在： https ://gyazo.com/a2deabb59fd68c5d371b0ba67f3aacb6

<script src="https://kit.fontawesome.com/e7a951e13e.js" crossorigin="anonymous"></script>
<div class="shoppingCart">
            <ul>
                <li>Milk <button><i class="fas fa-trash"></i></button></li>
                <li>Eggs <button><i class="fas fa-trash"></i></button></li>
                <li>Juice <button><i class="fas fa-trash"></i></button></li>
                <li>Pasta <button><i class="fas fa-trash"></i></button></li>
                <li>Water <button><i class="fas fa-trash"></i></button></li>
                <li>Donuts <button><i class="fas fa-trash"></i></button></li>
            </ul>
        </div>

标签： htmlcss

解决方案

使用 Flexbox 并给margin-left: auto按钮一个

ul { 
  display: inline-flex;
  flex-direction: column; 
  padding: 0 10px 0 0;
}

li { 
   display: flex;
   flex-direction: row; 
   width: calc(100% + 10px);
}

button {
   margin: 0 0 0 auto;
}
<script src="https://kit.fontawesome.com/e7a951e13e.js" crossorigin="anonymous"></script>
<div class="shoppingCart">
            <ul>
                <li>Milk <button><i class="fas fa-trash"></i></button></li>
                <li>Eggs <button><i class="fas fa-trash"></i></button></li>
                <li>Juice <button><i class="fas fa-trash"></i></button></li>
                <li>Pasta <button><i class="fas fa-trash"></i></button></li>
                <li>Water <button><i class="fas fa-trash"></i></button></li>
                <li>Donuts <button><i class="fas fa-trash"></i></button></li>
            </ul>
        </div>

推荐阅读