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

Posted 2023-03-06

【中文标题】将图标拉到右侧并与文本内联？

【英文标题】：Pull icon to right & inline with text?

【发布时间】：2020-02-02 02:45:20

【问题描述】：

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

我哪里错了？

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

【问题讨论】：

您要将图标放在<div> 的最右侧还是“项目”字样的右侧？

我正在寻找它是：[第 1 项检查]

我已经为你添加了一个可行的解决方案。

【参考方案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;