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

另一件事是你可能希望将字段很好地排列在另一个之下.实现这一目标的一种方法是使标签成为具有浮动左属性的块：

.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,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中呈现相同的方式

CSS标签与输入字段的垂直对齐

解决方法

相关推荐