Выпадающий элемент на клике не показывает наложение правильно

Question

Я хочу добавить сокращенное изображение к каждому выпадающему элементу, поэтому я написал следующий код:

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

Это выглядит следующим образом:

И я хочу, чтобы это выглядело следующим образом:

Итак, мой вопрос: что мне нужно сделать, чтобы цвет выделения охватывал всеэлемент

Answer 1

Вам нужно очистить плавающее значение, используя этот класс:

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

Answer 2

Проверьте это

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