Как мне сделать так, чтобы имена отображались левее и уменьшали расстояние между флажком и именем?

Я визуализирую поле формы Django (CheckboxSelectMultiple) внутри пользовательского выпадающего списка. Флажки и метки (имена) визуально сдвинуты вправо. Я хочу, чтобы выпадающий список выглядел как чистый контрольный список, со всеми значками флажков, расположенными в одном столбце, и текстом, начинающимся сразу справа от флажков, без дополнительных отступов.флажок и имена расположены далеко справа

{{ form.non_field_errors }}
{% for field in form %}
  <div style="margin-bottom: 1rem;">
    {{ field.label_tag }}<br>
    {% if field.name == 'team_members' %}
      <div class="dropdown">
        <button type="button" onclick="toggleDropdown(this)">Select Team Members</button>
        <div class="dropdown-content" style="display:none;">
          {% for checkbox in field %}
            <label style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;">
              {{ checkbox.tag }}
              <span style="font-size: 1rem;">{{ checkbox.choice_label }}</span>
            </label>
          {% endfor %}
        </div>
      </div>
    {% else %}
      {{ field }}<br>
    {% endif %}
    {{ field.errors }}
  </div>
{% endfor %}

<style>
.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);
}

</style>

Что я пробовал:

• Удалены все отступы и поля из .dropdown-content, label и input[тип="флажок"].

• Уменьшен разрыв между флажком и текстом.

• Попробовал ul, li { padding: 0; margin: 0; list-style: none; } на случай, если поле Django будет отображаться как список (этого не произошло).

• Использовалась позиция: абсолютная с значением left: 0 на флажке, чтобы переместить его влево, но вместо этого флажок появился справа от текста надписи.

• Попытался установить порядок: -1 во flexbox, чтобы переместить флажок перед текстом, но выравнивание по-прежнему казалось несогласованным.

Вернуться на верх