みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

htmlとcssについて

input typeのテキストと文字を左揃えで表示したいのですが、cssをどのようにすればいいのでしょう??
普通の状態だと、

ID
   「文字入力欄」

のように入力欄の左横に空白ができてしまいます。

<dt>ID</dt>
<dd>
<input type="text" name="id" size="35" maxlength="50" class="style_1" />
</dd>

投稿日時 - 2011-03-12 03:36:13

QNo.6587479

困ってます

質問者が選んだベストアンサー

dl(definition list:定義リスト)内のdt(definition term:用語)とdd(definition description:説明)は、ブラウザが持つデフォルトのスタイルシートでは、多くの場合dtは太字でddは左に余白を取って表示するようになっているようです。その余白はインデントではなく、マージンやパディングで設定しています。
 そのいずれを使用するかはブラウザによって異なります。!!!
そのため、すべてのブラウザで有効にするためには、あらかじめmargin,padding,font-weight,font-styleなどをリセットするか、一つ一つ設定する必要があります。
 たとえば、form内の定義リストについて設定するなら
form dl,form dt,form dd{margin-left:0px;padding-left:0px;font-weight:normal;}
/* その上で、それぞれについて設定をする。 */
form dd{margin-left:0px;padding-left:0px;}
form dd input{padding:0.2em;}

とか・・・。formの子孫セレクタとすることで、他の場面で登場するdlには影響を及ぼさない。詳細度も2以上となっていますね。

投稿日時 - 2011-03-13 09:11:42

お礼

回答ありがとうございます。
ブラウザによって少し違うんですね。

投稿日時 - 2011-03-13 22:17:02

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

dd {padding:0;margin:0;}
で左揃えになるとおもいます。

dt ddタグで インデントが発生しているのだとおもいます。

投稿日時 - 2011-03-12 14:36:42

お礼

回答ありがとうございます。
dd1としたところうまくいきましたが、ddだけでは左揃えになりませんでした。
これはなぜなんでしょう。
よろしければ回答おねがいします

投稿日時 - 2011-03-12 16:00:52

あなたにオススメの質問