Как отформатировать поля 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;
}
Однако, хотя это форматирует ячейки очень странно:
Он также ничего не делает для меток. Я не уверен, как ссылаться на метки, поскольку у них нет значений 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;
}