输入框标签与输入文本不对齐

Question

我正在使用Viget的In-Field Labels插件在表单上，但即使标签和输入框具有相同的字体大小、行高、高度、填充以及一切，输入框和标签的文本也无法对齐。输入框的文本比标签文本低一个像素。

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。 这里有一个演示例子。

我在这里缺失了什么？

- kmgdev

Answer 1

使用几乎100%的CSS就可以做到这一点，并避免由于position: absolute;引起的所有布局流问题。

诀窍是将LABEL包裹在文本和INPUT元素周围。将文本放在一个可以给予display: inline-block; margin-right: -100%;的元素中。这将使文本直接放置在INPUT下面，而INPUT将被赋予透明背景，以便通过INPUT看到文本。

当字段有用户输入时，需要一些Javascript来使INPUT背景不透明。目前没有其他方法... CSS无法“检测”非空INPUT元素。 jsFiddle演示

- thirdender

---

真是令人印象深刻，先生。非常令人印象深刻。 - kmgdev

一个问题：在 toggleClass('notEmpty', !!input.val()) 中第二个 ! 的作用是什么？ - kmgdev

我在定位方面遇到了问题（请参见fiddle）：http://jsfiddle.net/sX8Hq/ - kmgdev

INPUT太宽，无法适应父元素，导致其下移至新行。当您在INPUT上设置width: 100％;时，它是100％+边框宽度+填充宽度。我尝试了一些解决方案（http://jsfiddle.net/thirdender/sX8Hq/1/, http://jsfiddle.net/thirdender/sX8Hq/2/），但后来发现`box-sizing: border-box;受IE8+支持（http://caniuse.com/#search=box-sizing）。如果您不需要支持IE7，则这是最快的解决方案：http://jsfiddle.net/thirdender/sX8Hq/3/此外，请确保SPAN和INPUT`元素之间没有空格。 - thirdender

哦，!! 基本上将 input.val() 转换为布尔值 :-p !input.val() 将返回一个布尔值，但我们需要该值的反义，所以两个感叹号就可以了。!"" === true，!!"" === false。 - thirdender

Answer 2

我通过调整其中一条CSS规则来修复了这个问题：

input[type='text'], label {
    padding: 5px;
    margin: 0;
    font-size: 1em;
    line-height: 30px;
    height: 30px;
    color: #fff;
    display: block;
}

诀窍在于将容器高度设置为与行高相同。

您可以在此处查看效果：http://jsfiddle.net/audetwebdesign/d8Apy/7/

为什么这样做有效？

我猜测浏览器在输入和标签元素之间以不同的方式计算匿名行框的高度。至少在FireFox中，设置行高似乎是一个好办法。

我不记得CSS3规范中有关于这些细节的任何内容。

注意-跨浏览器效果

我在几个浏览器中进行了测试，并发现如果同时设置高度和行高并使用box-sizing，则会出现跨浏览器问题。但是，如果使用行高和box-sizing，则结果是一致的。我没有测试边框。

- Marc Audet

Answer 3

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;
}

- G-Cyrillus

---

我在发布几分钟后更新了我的 jsfiddle，其中我将两个元素的行高都设置为16像素。但是似乎没有起作用。 - kmgdev

奇怪，那我链接的小提琴怎么样？（http://jsfiddle.net/d8Apy/12/）哦，我明白了，你保留了height:30px。不需要，line-height已经给它高度了。 - G-Cyrillus