CSS标签与输入字段垂直对齐
我在一个在线系统的许多页面上设计了一个表单布局。 一个虔诚的用户为此目的多年，我现在很习惯使用CSS +标签。
我还没有能够掌握的一件事是不同的浏览器将标签相对于输入字段进行填充和定位的方式。 我将给出一个代码示例，再加上它在每个浏览器中呈现的特写图像（IE = IE9）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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" />
<style>
body {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
font-size:13px;
font-style:normal;
font-weight:normal;
letter-spacing:normal;
margin:20px;
}
input {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
border:solid 1px #666;
width:150px;
}
.fld {
}
.usr {
border:solid 1px red;
}
p {
}
</style>
</head>
<body>
<p>
<label class="usr" for="email">Email*</label>
<input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
</p>
</body>
</html>
好的 - 现在我可以张贴一张照片 - 这是Ahmed Masud的变化之后的样子。 他是对的 - 我有的reset.css文件（来自http://html5reset.org/）没有填充输入元素。 但是，即使在应用更改之后，标签中文本的底部对齐与输入中的底部对齐仍然存在差异。 现在，Firefox已经失效，IE和Chrome的标签文本高出1px。
如果我删除链接到reset.css，事情会再次发生变化：Chrome变为死亡级别，IE将标签放大1px，高于输入文本，Firefox 1px低于输入文本。 见下文：
我应该指出，这是一个非常基本的布局，只是为了尝试和诊断问题。 稍后我会让它看起来更好。 但首先，我需要知道如何使用一个CSS解决方案将所有文本排列在所有浏览器中。
好的css路线略带CSS2的黑色艺术，让我告诉你发生了什么：
1）reset.css你可能没有重置输入元素的填充，这就是为什么你得到这个关闭1/2像素错误
尝试添加这些到你的风格
所以有一件事是从输入中删除该填充：
input { padding: 0 }
您现在必须设置标签和输入元素的高度：
.fld { height: 16px; }
.usr { height: 16px; }
另一件事是你可能想把字段很好地对齐。 实现这一点的一种方法是使标签成为具有浮动剩余属性的块：
.usr { display: block; float: left; }
和.fld一个块：
.fld { display: block }
你会想添加一些其他参数给p来使渲染更美观。
这是我对你的文件做了什么：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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" />
<style>
body {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
font-size:13px;
margin:20px;
}
input {
border:solid 1px #666;
width:150px;
padding: 0;
height: 16px;
}
.fld { }
.usr {
border:solid 1px red;
height: 16px;
display: block;
float: left;
margin-right: 5px;
width: 7em;
}
p {
clear: both;
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>
<label class="usr" for="email">Email*</label>
<input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
</p>
<p>
<label class="usr" for="email">First Name*</label>
<input class="fld required email" type="text" name="fname" id="fname" value="Capital Letter">
</p>
</body>
</html>
这在IE / Safari / FF / Opera中呈现相同的方式
这是一种对齐方式：
<span>
<label>Email</label>
<input type="text" name="email" />
</span>
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;
}
上一篇: CSS label vertical alignment with input fields
下一篇: Can an instance of a class replace itself in JavaScript?