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

我正在设计一个表单布局，以便在在线系统的许多页面上使用。一个虔诚的用户为此目的多年，我现在很习惯使用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/）没有填充输入元素。但是，即使在应用更改之后，标签中文本的底部对齐与输入中的底部对齐仍然存在差异。现在火狐浏览器已经死了，而对于IE浏览器来说，标签文本高出1px。

enter image description here

如果我删除到reset.css链接，事情再次发生变化：镀铬变为死水平，即把标签1px的比输入文本更高版本，Firefox 1px的比输入文本低。请看下图：

enter image description here

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

来源

2011-12-19 TMA-1

你可以发布你的reset.css以及pl缓解？ – 2011-12-19 05:20:13

它来自html5reset.org - 添加上面的链接，以及对下面的答案的回复。 – 2011-12-20 00:35:18

好的CSS路线稍微一门黑色艺术与CSS2所以让我告诉你发生了什么：

1）reset.css你有可能是不重置这就是为什么你所得到的输入元素的填充该关闭的1/2像素误差

尝试增加这些你的风格

这么一件事就是从输入移除填充：

input { padding: 0 }

现在，您将需要设置标签和输入元素的高度：

.fld { height: 16px; } 
.usr { height: 16px; }

的另一件事是，你可能要对齐领域一个很好低于其他。实现的方法之一就是使标签与浮动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 /歌剧同样的方式

来源

2011-12-19 05:54:24

感谢您花时间回答 - 编辑了我上面的原始问题以包含您的更改。不幸的是仍然没有获得完美的结盟 – 2011-12-20 00:36:10

这是一个较老的问题，但截至2016年5月仍然相关。它在Ahmed的回答中适用而不适合您的原因可能是因为您正在使用ZOOM。我发现我目前正在为你的EXACT同样的问题苦苦挣扎。每当我得到完美的时候，在FF中如果我在缩放的时候标签有时会向上移动。因此，我调整了CSS以将其推回，但与此相关的问题是，下次我改变缩放时，它将以另一种方式再次关闭。太令人沮丧了。我尝试过很多解决方案，但都不是100％。此外，有时更改字体会导致它不对齐也... – PerryCS 2016-05-12 03:52:11

[登录到stackoverflow第一次在几年 - 哇 - 这已有10,000次！] 这不是缩放相关。但那是很久以前，在引导程序出现之前，所有事情都可以在各种浏览器上运行。所以..也许我应该关闭它... – 2017-07-21 04:55:42

这是使一个办法：

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

来源

2013-05-29 18:31:15 Damian

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

回答

相关问题