form 揃えたいです。

Question

html

 <center><form action="#">
    <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="zip21" class="form_text-small  syou align">
    -
    <input type="text" name="zip22" class="form_text-small syou align" onkeyup="AjaxZip3.zip2addr('zip21','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><br>
   <dd><textarea name="kanso" rows="10" cols="60" class="align"></textarea></dd>
   </center>
   <!-- フォームメールの送信先メールアドレス -->
     <input type="hidden" name="tomail" value="[e-mail]">
     <input type="hidden" name="tosubj" value="cobrush注文">
     <input type="hidden" name="todelim" value="TAB">
     
     <p>
     <input type="image" src="img/mail_6.jpg" alt="送信">
     <button type="reset"><IMG src="img/mail_7.jpg"></button>
     </p>
   </form>

コード

css

form{
	width: 900px;
	padding:30px 50px;
	}
	
form dl dt{
	widhth: 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;
}

コード

使用しているのはDWです。
入力フォームを揃えたいです。
まだまだ勉強中で見にくい部分もあるかとはおもいます。
このサイトも使うの初めてで記載方法が違うかもしれませんが、教えていただけると
助かります。

Comments

[dit.]

https://teratail.com/questions/214994と同じ内容でしょうか？
質問は編集することができるのでそちらでコードブロックへ対応していただければよかったのですが…。
できれば重複質問として削除依頼を出してください。

[shioazi0131]

使い方がいまいちわからなかったので

[dit.]

今からでも問題ないので、どちらかに削除依頼を出し、片方を残してください。
1つ前のものを残すのであればそちらを編集し、コードをこの質問と同じようにコードブロックにしてください。

[yambejp]

いまどきcenterタグとか利用している時点でちょっとhtmlや
cssの知識が足りてないかもしれません
具体的にどう揃えたいのでしょう？
手書きでいいので画像で提示されるとわかりやすいかと思います。
またhtml自体を変更してもよいのしょうか？
（jsは利用したくない？）

[shioazi0131]

すみません、色々調べながら使えるものを継ぎ接ぎの状態で使っております。
どれが今どきなのかなどは理解出来ておりません。
HTML自体は変更しても大丈夫です。がJSは利用しない方向で考えております…。
申し訳ございません。

Answer 1

とりあえず揃っていればいいならこんな感じ
（一部手を抜いているので公開の際は精査してください）

<style>
#wrap table{
margin:auto;
}
</style>
<div id="wrap">
<form action="#">
<table>
<tbody>
<tr>
    <th>名前:</th>
    <td><input type="text" name="name" size="50" class="dai align"></td>
</tr>
<tr>
    <th>法人名:</th>
    <td><input type="text" name="name" size="60" class="dai align"></td>
</tr>
<tr>
    <th>メールアドレス:</th>
    <td><input type="email" name="mail" size="60" class="syou align"></td>
</tr>
<tr>
    <th>メールアドレス(確認用):</th>
    <td><input type="email" name="mail" size="60" class="syou align"></td>
</tr>
<tr>
    <th>郵便番号：</th>
    <td><input type="text" name="zip21" class="form_text-small  syou align">
    -
    <input type="text" name="zip22" class="form_text-small syou align" onkeyup="AjaxZip3.zip2atdr('zip21','zip22','atdr21','atdr21');"></td>
</tr>
<tr>
    <th>都道府県:</th>
    <td><input type="text" name="atdr21" class="form_text  syou align"></td>
</tr>
<tr>
    <th>TEL:</th>
    <td><input type="text" name="TEL" size="40" class="syou align"></td>
</tr>
<tr>
    <th>FAX:</th>
    <td><input type="text" name="FAX" size="40" class="syou align"></td>
</tr>
<tr>
    <th>ご注文数:</th>
    <td><input type="text" name="suzi" size="30" class="syou align"></td>
</tr>
<tr>
    <th>備考欄</th><br>
   <td><textarea name="kanso" rows="10" cols="60" class="align"></textarea><br>その他特記事項がございましたらご利用ください。</td>
</tr>
</tbody>
</table>
<input type="hidden" name="tomail" value="[e-mail]">
<input type="hidden" name="tosubj" value="cobrush注文">
<input type="hidden" name="todelim" value="TAB">
<p>
  <input type="image" src="img/mail_6.jpg" alt="送信">
  <button type="reset"><IMG src="img/mail_7.jpg"></button>
</p>
</form>
</div>

Comments

[shioazi0131]

ありがとうございます。大変助かりました。
書き換えたところとても綺麗になりました。

大変恐縮ですが、もう一点お伺いしたいのですが、入力フォーム(白カッコ)の先頭を
揃えたい場合はどのような方法がありますでしょうか？
画像の方を追加いたします。(追加方法間違えていたらすみません。)

[yambejp]

> 画像の方を追加

画像がちゃんとハラれていないみたいですね
「入力フォーム(白カッコ)の先頭」がなんだかわかりません