How to move the fa-fa icon to right and space between

user_11241269 0
Viewed 263

Can anyone please let me know. How to move the fa-fa.trash icon to right most corner of the drop down option

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

1

That trash icon should move to right corner Thanks in Advance :)

css html
3 Answers

You can make use of 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>

user_118507600

You can do this easily by using flex on justify content space between css property.

Also, have added a class to your li to do css on that instead of doing on a label => as it might mess up the css of all the labels on the page.

You can read more about flex here

Run snippet below.

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

user_136690480

Remove outer div of link button trash and apply this 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>

user_133398370
Related