入力フィールドとCSSラベルの垂直方向の配置 | forms,css,input,alignment,label

私は、オンラインシステム内の多くのページでフォームレイアウトをデザインしています。何年もの間、この目的のためのテーブルの敬虔なユーザーですが、私はCSS
+ラベルをこれに使用するのにかなり慣れています。

One thing I’ve yet to be able to master is the way different
browsers pad & position the label relative to the input field.
I’ll give a code example, plus a close up image of how it renders
in each browser (IE = IE9).


<html>
<head>
  <title>HTML template</title>
  <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
  <link rel="stylesheet" type="text/css" href="reset.css" />
  
</head>
<body>

<input class="fld required email" type="text" name="email" id="email" value="Capital Letter"> </body> </html>

OK - now I can post a pic - here is what it looks like
after Ahmed Masud's changes. He was right - the reset.css file I
had (from http://html5reset.org/) didn't have
padding on the input element. However, even after applying the
changes, there is still a variation in the alignment of the base of
the text in the label compared to that in the input. Now Firefox is
dead-level, and for IE & Chrome the label text is 1px
higher.

enter image description here

reset.cssへのリンクを削除した場合、Chromeはデッドレベルになり、IEは入力テキストより1px高く、Firefoxは入力テキストよりも1px低くなります。下記参照:

enter image description here

私はこれが非常に基本的なレイアウトであり、単に問題を試して診断することを指摘しておきます。私はそれを後でもっとよく見せるだろう。しかし、まずは、すべてのブラウザで1つのCSSソリューションを使ってすべてのテキストラインを作成する方法を知っておく必要があります。

ベストアンサー

さて、CSSのアライメントは、CSS2のやや黒い芸術なので、何が起こっているか教えてください:

1)reset.cssおそらく入力要素のパディングをリセットしていないのですが、なぜそれが1/2ピクセルエラーで消えてしまったのでしょうか?

あなたのスタイルにこれらを追加してみてください

したがって、入力からパディングを削除することが1つです:

 input { padding: 0 }

ラベル要素と入力要素の両方の高さを設定する必要があります:

 .fld { height: 16px; }
 .usr { height: 16px; } 

もう1つは、おそらくフィールドをうまく整列させたいということです。これを達成する1つの方法は、float
leftプロパティを持つラベルをブロックにすることです。

 .usr { display: block; float: left; }

.fld aブロックも同様です。

 .fld { display: block }

レンダリングをより美しくするために、 p に他のパラメータを追加することをお勧めします。

ここで私はあなたのファイルにしたものです:


<html>
<head>
  <title>Southrock HTML template</title>
  <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
  <link rel="stylesheet" type="text/css" href="reset.css" />
  
</head>
<body>

<input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
<input class="fld required email" type="text" name="fname" id="fname" value="Capital Letter"> </body> </html>

これは、IE/Safari/FF/Operaでも同じようにレンダリングされます

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です