3

フォームでViget の In-Field Labels プラグインを使用していますが、ラベルと入力のフォント サイズ、行の高さ、高さ、パディング、すべてが同じであっても、入力とラベルのテキストが整列しません。入力テキストは、ラベル テキストより 1 ピクセル下にあります。

HTML:

<div class="fieldgroup">
    <label for="name">Name</label>
    <input type="text" id="name" name="name">
</div><!--/.fieldgroup-->

CSS:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Arial;
}
.fieldgroup {
  position: relative;
}
input[type='text'],
label {
  padding: 5px;
  font-size: 16px;
  line-height: 16px;
  margin: 0;
  height: 30px;
  color: #fff;
  display: block;
}
input[type='text'] {
  border: none;
  background: green;
}

プラグインは、ラベルpositionを に設定absoluteしtop、leftプロパティを に設定し0ます。

ここにフィドルがあります。

ここで何が欠けていますか？

4

3 に答える 3

2

ほぼ 100% CSS を使用してこれを行うことができ、レイアウト フローの問題をすべて回避できます。position: absolute;

jsFiddle demo

トリックはLABEL、テキストとINPUT要素をラップすることです。指定できる要素の中にテキストを入れますdisplay: inline-block; margin-right: -100%;。これにより、 のすぐ下にテキストが配置されINPUT、透明な背景が与えられ、 を通してテキストが見えるようになりますINPUT。

INPUTフィールドにユーザー入力がある場合、背景を不透明にするには、Javascript が必要です。現時点ではこれを回避する方法はありません... CSS は空でないINPUT要素を「検出」できません。

于 2013-06-12T21:15:22.157 に答える
0

http://jsfiddle.net/d8Apy/12/ ラベルのサイズを調整し、行の高さを入力してください。それらは同じ行の高さに座っているので、テキストは互いに重なっています

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Arial;
}
.fieldgroup {
    position: relative;

}
input[type='text'],
label {
    padding: 5px;
    margin: 0;
    line-height:16px;
    Font-size:16px;
    color: #fff;
    display: block;border:1px solid transparent
}
input[type='text'] {
    border: none;
    background: green;
}
于 2013-06-11T21:56:08.283 に答える