CSS标签与输入字段的垂直对齐
TMA*_*A-1 7 css forms label input alignment
我正在设计一个表单布局,以便在在线系统中的许多页面上使用.多年来一直是这个目的的虔诚用户,我现在已经习惯了使用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>
好的 - 现在我可以张贴一张照片 - 这是艾哈迈德·马苏德改变之后的样子.他是对的 - 我的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; }
另一件事是，您可能希望将字段一个一个地对齐。实现此目的的一种方法是使标签成为具有 float left 属性的块：
.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 中呈现相同的方式