横並びにしたdt,ddの高さがズレて困っています。

Question

ご教授ください
dldd,dtタグを使ってお問い合わせフォームを作成していますが、横並びになったdd,dtを同じ高さを保ったまま細かくmargin-top or buttomを指定することはできるのでしょうか？

最初のdtにidを指定したりしてやってみましたが、当然ddと高さがずれました。

何かいい方法があるのでしょうか。

<dl class="form">
 <dt >名前</dt>
  <dd><input name="name"  style="width:328px;height:36px;" /></dd>
 <dt>カナ</dt>
  <dd><input name="kana"  style="width:328px;height:36px;" /></dd>
 <dt>メールアドレス</dt>
  <dd><input name="email" style="width:328px;height:36px;" /></dd>
<dt>志望動機</dt>
<dd>
<input name="志望動機" type="checkbox" value="○○したい" />○○をしたい<br>
<input name="志望動機" type="checkbox" value="○○したい" />○○したい<br>
<input name="志望動機" type="checkbox" value="○○したい" />○○したい<br>
<input name="志望動機" type="checkbox" value="○○たい" />○○たい
</dd>
<dt>詳細</dt>
<dd><textarea  name="詳細" style="width:328px;height:108px;"></textarea></dd>
</dl>

dl.form dl,dt,dd{
  margin: 0;
  padding: 0;
}
dl.form{
  background: none;
  width: 85%;
  font-size: 14px;
}


dl.form dt {
clear: left;
float: left;
width: 26%;
}
dl.form dd{
  margin-left: 120px;
  
}
#form_name{
  margin-top: 48px;
  margin-bottom: 12px;
}

Answer 1

"横並び定義リスト"は極めて制御が難しいため, 次のように間にdiv要素を挟んだ上でスタイルを設定すると良いでしょう.(div要素により行毎の高さを制御できるようになります)

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

コード引用元
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dl

Comments

[yumi55]

有難うございます！お陰様で解決しました。divでくくればいいんですね。綺麗にレイアウト出来ました

Answer 2

ddをclassかnth-of-typeなどで指定して、margin-bottomを付けていくと、現状のコードを大きくいじらずに実現できるかと思います。
例えばこんな感じです。

...
dl.form dd{
  ...
  margin-bottom:20px;
}
dl.form dd:nth-of-type(3){
  margin-bottom:40px;
}
...

Comments

[yumi55]

有難うございます。nth-of-typeで指定することも出来るんですね。コードを大きくいじらなくて良いのはいいですね。勉強してトライしてみます。

Answer 3

･･･当然ddと高さがずれました。

この理由が「当然」と分かっているのなら対処可能では？

---

<input name="name" ～ここのCSS指定は#form_nameとなっていますが、<input id="name" ～と#nameではないでしょうか？margin-top: 0;で<dt>と高さは揃うはずです。

-追記-
すみません勘違いしておりました。name="name"はname要素でしたね。idまたはclassを付与してやれば良いと思います。

Comments

[yumi55]

有難うございました！解決しました！