formが揃わない、、、。

今ホームページの作成をしているのですが、注文のメールフォームを作成の際
textboxが揃わず不恰好で困っています。
お力添えをお願いしたいです。

現段階のformのhtml

<dl> <dt>名前：</dt> <dd><input type="text" name="name" size="50" class="dai align"></dd> <dt>法人名：</dt> <dd><input type="text" name="name" size="60" class="dai align"></dd> <dt>メールアドレス</dt> <dd><input type="email" name="mail" size="60" class="syou align"></dd> <dt>メールアドレス確認用</dt> <dd><input type="email" name="mail" size="60" class="syou align"></dd> <dt>郵便番号：</dt> <dd><input type="text" name="zip22" class="form_text-small syou align"> - <input type="text" name="zip22" class="form_text-small syou align" onkeup="AjaxZip3.zip2addr('zip2','zip22','addr21','addr21');"> </dd><br> <dt>都道府県</dt> <dd><input type="text" name="addr21" class="form_text syou align"></dd> <dt>TEL</dt> <dd><input type="text" name="TEL" size="40" class="syou align"></dd> <dt>FAX</dt> <dd><input type="text" name="FAX" size="40" class="syou align"></dd> <dt>ご注文</dt> <dd><input type="text" name="suzi" size="30" class="syou align"></dd> <dt>備考欄その他特記事項がございましたら記入してください</dt> <dd><texarea name="kanso" rows="10" cols="60" class="align"></textarea></dd> </center> </form>

css 下記

form{
width:900px;
padding:30px 50px;
}
form dl dt{
width: 165px;
padding: 10px 0;
float:left;
clear: both;
}
input.dai{
height:25px;
margin-top: 10px;
margin-bottom: 10px;
}
input.syou{
height: 15px;
margin-top: 15px;
margin-bottom: 15px;
}
form{
padding: 10px 0;
}

element.style{
padding-top: 300px;
}

以上がformについてかいたコードになります。
調べ持って色々付け足してとしていくうちによくわからなくなりました、、、。
大変見にくいかとは思いますが知恵をお貸し頂ければと思います。

全フォーム表示はされますが、入力されるボックスが先頭がバラバラなのを揃えたいです。

<dt>の部分は先頭全て揃っております。

よろしくお願いいたします。

m.ts10806

2019/10/02 20:17

コードはマークダウンのcode機能を利用してご提示ください

Lhankor_Mhy

2019/10/05 01:55

「入力されるボックスが先頭がバラバラ」とのことですが、ご提示のコードを当方で試したところ、そろっているように見えました。なので、問題が再現しません。

行動規範の内容に同意します

回答1件

centerタグを書いているので、バラバラになってしまいます。
今、centerタグを使うことはまずないです。<div>にスタイルを設定して、marginでform全体をcenterに来るようにした方が良いかと思います。

<div style="margin:0 auto; width:◯◯◯px;">
  <form>
    ...
  </form>
</div>

該当のソースで修正すればこんな感じです。

CSS
1center {
2  text-align:left; /* 左寄せにする */
3}
4form{
5width:900px;
6padding:30px 50px;
7}
8form dl dt{
9width: 165px;
10padding: 10px 0;
11float:left;
12clear: both;
13}
14input.dai{
15height:25px;
16margin-top: 10px;
17margin-bottom: 10px;
18}
19input.syou{
20height: 15px;
21margin-top: 15px;
22margin-bottom: 15px;
23}
24form{
25padding: 10px 0;
26}
27
28element.style{
29padding-top: 300px;
30}

html
1<center>
2  <form action="#">
3    <dl>
4    <dt>名前：</dt>
5    <dd><input type="text" name="name" size="50" class="dai align"></dd>
6    <dt>法人名：</dt>
7    <dd><input type="text" name="name" size="60" class="dai align"></dd>
8    <dt>メールアドレス</dt>
9    <dd><input type="email" name="mail" size="60" class="syou align"></dd>
10    <dt>メールアドレス確認用</dt>
11    <dd><input type="email" name="mail" size="60" class="syou align"></dd>
12    <dt>郵便番号：</dt>
13    <dd><input type="text" name="zip22" class="form_text-small syou align">
14        <input type="text" name="zip22" class="form_text-small syou align" onkeup="AjaxZip3.zip2addr('zip2','zip22','addr21','addr21');">
15    </dd>
16    <dt>都道府県</dt>
17    <dd><input type="text" name="addr21" class="form_text syou align"></dd>
18    <dt>TEL</dt>
19    <dd><input type="text" name="TEL" size="40" class="syou align"></dd>
20    <dt>FAX</dt>
21    <dd><input type="text" name="FAX" size="40" class="syou align"></dd>
22    <dt>ご注文</dt>
23    <dd><input type="text" name="suzi" size="30" class="syou align"></dd>
24    <dt>備考欄 その他特記事項がございましたら記入してください</dt>
25    <dd><textarea name="kanso" rows="10" cols="60" class="align"></textarea></dd>
26    </dl>
27  </form>
28</center>