Как отформатировать поля CharFields формы Django, чтобы они располагались рядом друг с другом в одной строке?

В настоящее время я использую класс Django Form для создания формы. Я пытаюсь сделать так, чтобы все поля CharField имели свою собственную строку, за исключением нескольких специфических полей, которые я хотел бы сделать общими.

Вот те поля символов, которые у меня есть на данный момент:

class ExampleForm(forms.Form):
    example_1 = forms.CharField(max_length=20, required=False)
    example_2 = forms.CharField(max_length=20, required=False)
    example_3= forms.CharField(max_length=20, required=False)

def __init__(self, *args, **kwargs):
    super(MetadataForm, self).__init__(*args, **kwargs)
    self.fields['example_1'].widget.attrs['style']  = 'width:15%;'
    self.fields['example_2'].widget.attrs['style']  = 'width:15%;'
    self.fields['example_3'].widget.attrs['style']  = 'width:15%;'

Вот как они отображаются в HTML:

<label for="id_example_1">Example 1:</label>
<input type="text" name="example_1" maxlength="20" style="width:15%;" id="id_example_1">
<label for="id_example_2">Example 2:</label>
<input type="text" name="example_2" maxlength="20" style="width:15%;" id="id_example_2">
<label for="id_example_3">Example 3:</label>
<input type="text" name="example_3" maxlength="20" style="width:15%;" id="id_example_3">

В попытке отформатировать example_1 и example_2 на одной строке, я попробовал сместить метки влево, а затем добавить пространство между ними, увеличив поля:

#example_1, #example_2, #example_3 {
    float: left;
    margin-left: 100px;
}

Однако, хотя это форматирует ячейки очень странно:

enter image description here

Он также ничего не делает для меток. Я не уверен, как ссылаться на метки, поскольку у них нет значений id, которые я мог бы использовать. Если есть способ отформатировать примеры 2 и 3 на одной строке, я буду очень признателен.

просто вручную отрендерите его в соответствии с вашими потребностями, например, так:

..
<div class="form-wrapper">
   {% for field in form %}
   <div class="field-wrapper">
       <div class="field-label">{{ field.label }}</div>
       <div class="field-input">{{ field.input }}</div>
   </div>
</div>
{% endfor %}
...

и CSS

.form-wrapper {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}
Вернуться на верх