Html 如何使用图标和标题正确设置列表项的样式

我有一个li（列表项），它包含四个元素。我想左对齐其中两个元素，右对齐另外两个元素。li是使用引导框架和项目的页面的一部分： 这是李

<li class="list-group-item d-flex justify-content-between align-items-center">
 <i class="fa fa-plus-square-o" aria-hidden="true"></i> Pay Car Insurance
 <i class="fa fa-pencil" aria-hidden="true"></i>
 <i class="fa fa-trash-o" aria-hidden="true"></i>
</li>

交汽车保险

您可以尝试添加

class=“向右拉”

或

class=“向左拉”

---

在您的案例中，您需要做的唯一一件事（使其仅适用于本机引导程序4类，且无任何css攻击）是将

ml auto

（左边距：auto）类添加到第三个元素，即铅笔图标

然后，通过向加号和铅笔图标添加

pr-3

（padding right）类，只需向加号和铅笔图标添加一点填充。就这样

以下是工作代码：

待办事项列表项


交汽车保险

这仅适用于大屏幕尺寸

<li class="list-group-item  justify-content-between align-items-center">
    <i class="fa fa-plus-square-o left" aria-hidden="true"></i> 
    <span class="left marg_left">Pay Car Insurance </span>
    <i class="fa fa-pencil right marg_left" aria-hidden="true"></i>
    <i class="fa fa-trash-o right  " aria-hidden="true"></i>
</li>

.marg_left {
    line-height: 16px;
    margin-left: 12px;
}

.left {
    float: left;
}

.right {
     float: left;
}

.marg_right{
     margin-right:12px;
}