下拉项 onClick 未正确显示叠加层答案

【问题标题】：Dropdown item onClick does not show the overlay correctly下拉项 onClick 未正确显示叠加层
【发布时间】：2019-10-28 09:09:49
【问题描述】：

我想为每个下拉菜单添加一个快捷方式图像，因此，我编写了以下代码：

<a class="dropdown-item" id="dropdown_new_line">
    <span style="float: left">New Line</span>
    <span style="float: right;">
        <img class="icon" 
             src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
    </span>
</a>

如下所示：

我希望它看起来像下面这样：

所以我的问题是，我该怎么做才能使高亮颜色覆盖整个元素？

【问题讨论】：

标签： javascript html twitter-bootstrap bootstrap-4

【解决方案1】：

测试一下

<a class="dropdown-item clearfix" id="dropdown_new_line">
    <span class="float-left">New Line</span>
    <span class="float-right">
        <img class="icon" 
             src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
    </span>
</a>

【讨论】：

【解决方案2】：

您需要使用此类清除浮动：

.clearfix{
    clear:both;
}

并在父元素上添加此类：

<a class="clearfix dropdown-item" id="dropdown_new_line">
    <span style="float: left">New Line</span>
    <span style="float: right;">
        <img class="icon" 
                src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
    </span>
</a>

【讨论】：