如何将fa fa-trash图标移至下拉选项最右侧并设置间距

嘿，这个需求很好实现，咱们用CSS的Flex布局就能轻松搞定！你的结构里label标签包含了单选框、文本和删除按钮，只需要给label加几个CSS属性，就能让垃圾桶图标自动靠到最右侧。

具体实现步骤： #

1. 给label设置Flex布局，让内部元素可以灵活排列
2. 用justify-content: space-between把左侧的单选框+文本和右侧的垃圾桶按钮分开
3. 加上align-items: center让所有内容垂直居中，视觉效果更协调
4. 确保label占满容器宽度，这样space-between才能生效

完整代码示例： #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
  .filter-option label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
</style>

<li class="filter-option">
  <label>
    <input type="radio" data-name="selectItem" value="testvale" original-value="testvale">&nbsp;<span>testvale</span>
    <div>
      <a class="delete-savedFilter" type="button"><i class="fa fa-trash"></i></a>
    </div>
  </label>
</li>

小说明： #

• 我给li加了个类名filter-option，这样CSS选择器更精准，不会影响页面上其他的label元素
• 如果你的li已经有现成的类名，直接替换掉.filter-option就行
• justify-content: space-between会自动把两个子元素（单选框+文本的组合、垃圾桶的div）分别放在容器左右两端，刚好满足你的需求

内容的提问来源于stack exchange，提问作者ragavi gr