将图标向右拉并与文本内联？

Question

将图标向右拉有点困难。我希望它在右边，而不是与文本脱节。

我哪里错了？

.featuresCard{
width: 80vw;
padding: 12px;
margin-bottom: 15px!important;
color: white;
background-color: #e74c3c!important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>



<div id='results1' class="card results1 resultsList featuresCard" >Item 1 <i class="pull-right fa fa-check"></i> </div>

<div id='results2' class="card results2 resultsList featuresCard"> Item 2 <i class="pull-right fa fa-check"></i></div>

<div id='results3' class="card results3 resultsList featuresCard"> Item 3 <i class="pull-right fa fa-check"></i></div>

Answer 1

我建议您研究一下 flexbox，非常酷的东西。如果想让文字和图标并排，去掉justify-content即可。

在这里查看：https://jsfiddle.net/xwh59uy6/1/

display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;

将图标向右拉并与文本内联？

Pull icon to right & inline with text?

css

twitter-bootstrap

font-awesome

bootstrap-4