Question

我正在设计一个表单布局，以便在在线系统中的许多页面上使用。多年来一直是这个目的的虔诚用户，我现在已经非常习惯使用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＆amp; Chrome标签文字高出1个像素。

enter image description here

如果我删除了reset.css的链接，事情会再次发生变化：Chrome变为死级，IE将标签比输入文本高1px，Firefox 1px低于输入文本。见下文：

enter image description here

我应该指出，这是一个非常基本的布局，只是为了尝试和诊断问题。我以后会让它看起来更好。但首先我需要知道如何使用一个CSS解决方案在所有浏览器中排列所有文本。

Answer 1

好吧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中以相同的方式呈现

Answer 2

这是一种对齐方式：

<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标签与输入字段的垂直对齐

2 个答案: