入力フィールドとCSSラベルの垂直方向の配置

私は、オンラインシステム内の多くのページでフォームレイアウトをデザインしています。何年もの間、この目的のためのテーブルの敬虔なユーザーですが、私は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ソリューションを使ってすべてのテキストラインを作成する方法を知っておく必要があります。

7
これはhtml5reset.orgからのものです。上記のリンクを追加し、あなたの答えに応じて下のリンクを追加しました。
追加された 著者 TMA-1,
reset.cssも投稿できますか?
追加された 著者 Ahmed Masud,

2 答え

さて、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でも同じようにレンダリングされます

3
追加された
上記の私のオリジナルの質問を編集して、あなたの変更を反映させていただき、ありがとうございます。残念ながら完璧なアライメントが得られません。
追加された 著者 TMA-1,
[何年にもわたって初めてstackoverflowにログオンしました - うわー - これは10,000回のビューを持っていました!]それはズームに関連していませんでした。しかし、ブートストラップが登場してから、幅広いブラウザですべてが動作するようになったのはずっと前のことでした。だから、私はちょうどこれを閉じるべきです...
追加された 著者 TMA-1,
ねえ、それを閉じないでください。レガシーデータも便利です
追加された 著者 Ahmed Masud,
これはより古い質問ですが、2016年5月現在でも関連しています。あなたが答えを出してアーメドのために働いた理由は、あなたがズームを使用しているためです。私は現在、あなたと同じ問題を抱えています。私が完璧になるたびに、FFで、私は時々ズームしてラベルが上に移動します。ですから、私はCSSを調整して戻しますが、その問題は次回ズームを変更したときにもう一度オフになることです。だからイライラする。私は多くのソリューションを試してきましたが、どれも100%はありません。また、時にはフォントを変更すると、それも整列から外れる原因になります...
追加された 著者 PerryCS,

これは整列する1つの方法です:


    
    <input type="text" name="email" />

CSS:

form span {
    vertical-align: middle;
    display: block;
    width: 100%;
}
form label { 
    display: inline-block; 
    float: none;
    width: 150px;
    padding: 0;
    margin: 5px 0 0;
    text-align: left; 
}
form input {
    display: inline-block;
    float: none;
    width:auto;
    margin:5px 0 0 10px; 
    padding:5px 5px;
}
0
追加された