3

我在表单上使用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。

这是一个小提琴。

我在这里想念什么？

4

3 回答 3

2

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

jsFiddle demo

诀窍是环绕LABEL文本和INPUT元素。将文本放在可以给出的元素中display: inline-block; margin-right: -100%;。这会将文本直接放在 下方INPUT，并为其提供透明背景，因此文本可以通过INPUT.

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

于 2013-06-12T21:15:22.157 回答
0

我通过调整 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 规范中的任何内容。

注意 - 跨浏览器效果

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

于 2013-06-11T21:45:48.130 回答
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 回答