Question

任何人都可以让我知道。如何将fa-fa.trash图标移动到下拉选项的最右端

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

<li class="" style="false">
  <label class="">
    <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>

该垃圾桶图标应移到右上角在此先感谢：）

Answer 1

您可以使用flexbox：

label {
  display:flex;
  justify-content:space-between;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
  <li class="" style="false"><label class="">
    <span>
    <input type="radio" data-name="selectItem"
           value="testvale" original-value="testvale">&nbsp;
      <span>testvale</span></span>
    <div> <a class="delete-savedFilter" type="button"><span>trash</span></a> </div></label></li>

</body>
</html>

Answer 2

您可以通过在CSS属性之间的flex空间上使用justify content来轻松地做到这一点。

此外，已经在您的li中添加了一个类来对此进行CSS处理，而不是对label =>进行处理，因为这可能会弄乱页面上所有标签的CSS。

您可以了解有关flex here

的更多信息

运行下面的代码段。

.filter-trash-icon {
  display: flex;
  justify-content: space-between;
}

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

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

Answer 3

删除链接按钮垃圾的外部div并应用此CSS

style="float:right;"

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

<li class="" style="false">
  <label class="">
    <input type="radio" data-name="selectItem" value="testvale" original-value="testvale">&nbsp;<span>testvale</span>
     
      <a class="delete-savedFilter" style="float:right;" type="button"><i class="fa fa-trash"></i></a>
    
  </label>
</li>

如何将fa-fa图标向右移动并在

3 个答案: