投稿フォームの整列

CSS + HTMLでのinputフォームを使う際、フォームの左側に文字を入れたいのですが、文字数が違うと端がそろわなくなり見た目が悪いです。(画像参照)

float:leftでできるかと思い文字とフォームを左右に分けたのですが文字の高さとフォームの高さがうまくあわせられなくてうまくいきません。(文字=0.9em)

inputフォームの左端を揃えるにはどのようにすればよいのでしょうか？

No.5 ベストアンサー 回答者： mflow 回答日時： 2009/10/03 04:08

こんな感じが今のスタンダード。

テーブルタグでやるとか、ナンセンスです。

dl.profile dt{
clear:left;
position: relative;
float: left;
width: 10em;
padding:10px 0px 0px 0px;
}
dl.profile dd{
margin-left: 10em;
width: 300px;
padding: 10px 10px 10px 0px;
}

<dl class="profile">
<dt>お名前</dt>
<dd><input name="name" type="text" size="40" /></dd>
<dt>件名</dt>
<dd><input name="subject" type="text" size="40" /></dd>
<dt>メール</dt>
<dd><input name="email" type="text" size="40" /></dd>
</dl>

この回答へのお礼

今思いっきりテーブルでやってたところです（笑）
こちらのやり方もきれいにまとまりますね。

お礼日時：2009/10/03 17:43

No.4 回答者： noname#119957 回答日時： 2009/10/03 01:15

■formの要素を綺麗に配置する一番簡単な方法は、テーブルに格納することです。

■ＣＳＳでやりたいなら、この場合は、labelのとテキストエリアの幅を固定すればいけそうに思います。

この回答へのお礼

装飾にもなるのでよさそうですね。
ちょっと試してみます。

お礼日時：2009/10/03 17:08

No.3 回答者： torayoshi 回答日時： 2009/10/02 20:20

一番簡単なやり方。

すべて6バイトで統一する。

お名前
件　名
メール

この回答へのお礼

これも悪くないのですが、プロポーショナルフォントだと若干がたつきますね。

お礼日時：2009/10/03 17:09

No.2 回答者： salonpath 回答日時： 2009/10/02 16:57

どんなマークアップしてるかで変わってきますが

お名前、件名、メール側のタグでwidthを固定したらいいと思いますよ。

この回答へのお礼

文字の３行を左div、input３段を右divでfloatしてたのがそもそも間違いでした。
難しく考えすぎだったようですね。

お礼日時：2009/10/03 17:06

No.1 回答者： yambejp 回答日時： 2009/10/02 16:55

一般に縦横の整列をした表示をテーブルといいます。

またdiv+floatでやるなら、余裕をみた固定のwidthをcssで
指定してやればよいかとおもいます。

この回答へのお礼

わざと大きめにしておくのですか。
ブラウザの解釈によってもばらつきがでないのでいいですね。

お礼日時：2009/10/03 17:03