Question

我在表单上使用Viget's In-Field Labels plugin，但即使标签和输入具有相同的字体大小，相同的行高，相同的高度，相同的填充，相同的所有，输入和标签文本不对齐。输入文本比标签文本低一个像素。

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。

Here's a fiddle

我在这里缺少什么？

Answer 1

使用几乎100％的CSS可以做到这一点，并避免position: absolute;

引起的所有布局流问题

的 jsFiddle demo

诀窍是将LABEL包裹在文本和INPUT元素周围。将文本放在可以赋予display: inline-block; margin-right: -100%;的元素中。这会将文本直接放在INPUT下面，该文本具有透明背景，因此通过INPUT可以看到文本。

当字段具有用户输入时，某些Javascript必须使INPUT背景不透明。目前还没有解决这个问题...... CSS无法“检测”非空INPUT元素。

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，则会出现跨浏览器问题。但是，如果使用行高和框大小，结果是一致的。我没有测试边框。

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

现场标签不要与输入文本对齐

3 个答案: