dlタグを使ったフォーム(form)レイアウト

dlタグを使ったフォームのレイアウトを作成します。

(項目名をdt要素、入力欄をdd要素を使い記述する)

– HTML –

デフォルトのレイアウト

上記に対してスタイルを設定していきます。

– CSS –

① 背景色と余白を調整する。

② floatプロパティを使用して項目と入力欄を横並びにする。
clear:bothとして項目ごとに都度回り込みを解除する。
widthで幅を持たせて項目と入力欄の間隔を統一する。

③ ddタグのpaddingをdtタグと同じ値にする。(項目と入力欄の高さを揃える)

④ inputタグの幅と高さを調整する。(各inputタグにあらかじめクラスを設定している)高さを統一し、入力項目に合わせて適正な幅を指定している。

完成図

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください