投稿フォームの整列

質問

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

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

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

回答No.5

mflow · ベストアンサー

こんな感じが今のスタンダード。
テーブルタグでやるとか、ナンセンスです。

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>

お礼

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

回答No.4

noname#119957

■formの要素を綺麗に配置する一番簡単な方法は、テーブルに格納することです。
■ＣＳＳでやりたいなら、この場合は、labelのとテキストエリアの幅を固定すればいけそうに思います。

お礼

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

回答No.3

torayoshi

一番簡単なやり方。
すべて6バイトで統一する。

お名前
件　名
メール

お礼

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

回答No.2

salonpath

どんなマークアップしてるかで変わってきますが
お名前、件名、メール側のタグでwidthを固定したらいいと思いますよ。

お礼

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

回答No.1

yambejp

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

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

お礼

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