ラベルと入力フィールドを揃えるためにスタイル設定したい一般的なフォームがあります。何らかの理由でラベルセレクタに幅を指定しても、何も起こりません。
HTML:
<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
<p>
<label for="id_title">Title:</label>
<input id="id_title" type="text" class="input-text" name="title"></p>
<p>
<label for="id_description">Description:</label>
<textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
<p>
<label for="id_report">Upload Report:</label>
<input id="id_report" type="file" class="input-file" name="report">
</p>
</form>
CSS:
#report-upload-form {
background-color: #316091;
color: #ddeff1;
font-weight:bold;
margin: 23px auto 0 auto;
border-radius:10px;
width: 650px;
box-shadow: 0 0 2px 2px #d9d9d9;
}
#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
}
#report-upload-form input[type=text],
#report-upload-form input[type=file],
#report-upload-form textarea {
width: 305px;
}
出力:
私は何を間違えていますか?
display: inline-block
を実行:
#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
display:inline-block
}
display: inline-block;
を使用
説明:
label
はインライン要素です。つまり、必要な大きさだけです。
display
プロパティを有効にするには、block
プロパティをinline-block
またはwidth
に設定します。
例:
#report-upload-form {
background-color: #316091;
color: #ddeff1;
font-weight: bold;
margin: 23px auto 0 auto;
border-radius: 10px;
width: 650px;
box-shadow: 0 0 2px 2px #d9d9d9;
}
#report-upload-form label {
padding-left: 26px;
width: 125px;
text-transform: uppercase;
display: inline-block;
}
#report-upload-form input[type=text],
#report-upload-form input[type=file],
#report-upload-form textarea {
width: 305px;
}
<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
<p><label for="id_title">Title:</label> <input id="id_title" type="text" class="input-text" name="title"></p>
<p><label for="id_description">Description:</label> <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
<p><label for="id_report">Upload Report:</label> <input id="id_report" type="file" class="input-file" name="report"></p>
</form>
ラベルはインラインであるため、幅をとらないと思います。 「display:block」を使用して、そこから進んでみてください。
最初にブロックにし、次に左にフロートして、次のブロックを新しい行にプッシュするのを停止します。
#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
display:block;
float:left
}
スタイルを与える
display:inline-block;
これが役立つことを願って
label
のデフォルトdisplay
モードはinline
です。これは、コンテンツに合わせて自動的にサイズを調整することを意味します。幅を設定するには、display:block
を設定してから、いくつかの調整を行って正しく配置する必要があります(おそらくfloat
を含む)