複数のフォームのテキストボックスの位置を揃える方法のHTML実装

フォームのコードはこのとおりで、スタイルシートはまだ追加されていません。フォームが整列していないので見づらいですが、HTMLはフォームの整列のためのタグや関数を提供しません。

htmlのソースコードです。

Django 1.7.1 and above Use the following command
# 1. create the changed file
python manage.py makemigrations
# 2. apply the generated py file to the database
python manage.py migrate

フォーム表示の効果画像です。

フォームの位置がそろうように、HTMLに以下のCSSコードを追加します。

python3 manage.py migrate

スタイルシートを追加した後のフォーム表示

フォームの整列を実装するCSSスニペットは以下の通りです。

        label{
            cursor: pointer;
            display: inline-block;
            padding: 3px 6px;
            text-align: right;
            width: 150px;
            vertical-align: top;
        }

各フォームの親要素を次のように仮定します。 <p> タグを使用します。 <label> ラベルはフォームの説明文であり、テキストボックスの左側のテキストである <input> ラベルはテキストボックスです。ラベルの位置合わせは、ラベルと入力ラベルが同じp-labelに属しているので、ラベルの幅を一定の値、例えばこの場合は150pxに設定するだけで、左から右に表示され、ラベルの長さはフォームのテキストボックスの位置に合わせて指定されます。

フォーム内の複数のテキストボックスを整列させる方法については、この記事がすべてです。フォーム内の複数のテキストボックスを揃える方法については、スクリプトハウスの過去記事を検索していただくか、引き続き下記の関連記事をご覧ください。