Как я могу сделать имена более слева и уменьшить расстояние между флажком и именем? ⇐ Html

[Anonymous]

Я рендерирую поле формы Django (CheckboxSelectMultiple) внутри пользовательского выпадения.
Флакторы и этикетки (имена) визуально смещены вправо.
Я хочу, чтобы раскрывающийся список выглядел как чистый контрольный список, со всеми значками флажок в одном и том же столбце и на сразу же на сборе. Право < /p>
{{ form.non_field_errors }}
{% for field in form %}

{{ field.label_tag }}

{% if field.name == 'team_members' %}

Select Team Members

{% for checkbox in field %}

{{ checkbox.tag }}
{{ checkbox.choice_label }}

{% endfor %}


{% else %}
{{ field }}

{% endif %}
{{ field.errors }}

{% endfor %}


.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: relative;
background: #fff;
border: 1px solid #ccc;
padding: 10px;
z-index: 100;
min-width: 220px;
max-height: 220px;
overflow-y: auto;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
}
.dropdown-content label {
display: flex;
align-items: center;
margin-bottom: 6px;
cursor: pointer;
justify-content: flex-start;
gap: 2px; /* smaller gap */
}

.dropdown-content input[type="checkbox"] {
margin-right: -5px; /* remove extra margin */
transform: scale(1.1);
}


< /code>
Что я попробовал: < /p>

• Удал все прокладки и края из .dropdown-content, label и вход [type = "checkbox"]. < /p>
  < /li>
  уменьшил пробел между флажкой и текстом. /> попробовал ul, li {padding: 0; поля: 0; Список стиля: нет; } В случае, если поле Django, отображаемое в виде списка (это не так). < /p>
  < /li>
  Используемая позиция: абсолютно с левой: 0 на флажке, чтобы заставить его влево, но это сделало флажок с правой стороны текста метки. Перед текстом, но выравнивание все еще казалось противоречивым.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -between-t