Как переместить значок fa-fa вправо и пробел между ними - PullRequest
Новая
       1

Как переместить значок fa-fa вправо и пробел между ними

2 голосов
/ 09 июля 2020

Может кто-нибудь дайте мне знать. Как переместить значок fa-fa.tra sh в самый правый угол раскрывающегося меню 

<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

Значок tra sh должен переместиться в правый угол. Заранее спасибо :)

Ответы [ 3 ]

0 голосов
/ 09 июля 2020

Вы можете легко сделать это, используя flex на justify content пробеле между css свойством.

Кроме того, добавьте класс в свой li, чтобы сделать css вместо этого. делать на label =>, так как это может испортить css всех ярлыков на странице.

Подробнее о flex можно узнать здесь

Выполните фрагмент ниже. 

.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>
0 голосов
/ 09 июля 2020

Удалите внешний div кнопки ссылки tra sh и примените это 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>
0 голосов
/ 09 июля 2020

Вы можете использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...