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

发布于 2024-12-21 20:52:03 字数 1760 浏览 4 评论 0原文

我正在设计一个可在在线系统中的许多页面上使用的表单布局。多年来，我一直是用于此目的的表格的忠实用户，现在我已经非常习惯使用 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 和 IE 来说， Chrome 标签文本高 1 像素。

在此处输入图像描述

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

在此处输入图像描述

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

原文

I'm designing a form layout to be uesd on many pages within an online system. A devout user of tables for this purpose for many years, I'm getting pretty used to using CSS + labels for this now.

One thing I've yet to be able to master is the way different browsers pad & position the label relative to the input field. I'll give a code example, plus a close up image of how it renders in each browser (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>

OK - now I can post a pic - here is what it looks like after Ahmed Masud's changes. He was right - the reset.css file I had (from http://html5reset.org/) didn't have padding on the input element. However, even after applying the changes, there is still a variation in the alignment of the base of the text in the label compared to that in the input. Now Firefox is dead-level, and for IE & Chrome the label text is 1px higher.

enter image description here

If I remove the link to reset.css, things change again: Chrome becomes dead-level, IE puts the label 1px higher than the input text, Firefox 1px lower than the input text. See below:

enter image description here

I should point out that this is a very basic layout, simply to try and diagnose the problem. I'll be making it look all better later. But first I need to know how to make all my text line up across all browsers with one CSS solution.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三生路 2024-12-28 20:52:03

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

Okay css alignments are slightly a black art with CSS2 so let me tell you what's happening:

1) the reset.css you have probably is NOT resetting the padding of the input element which is why you are getting that off by 1/2 pixel error

Try adding these to your style

So one thing is to remove that padding from input:

 input { padding: 0 }

You will now have to set the height of both label and input elements:

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

The other thing is that you probably want to align fields nicely one below the other. One way to achieve that is to make the label a block with float left property:

 .usr { display: block; float: left; }

and the .fld a block as well:

 .fld { display: block }

you would want to add some other parameters to p to make rendering something more aesthetic.

Here is what i did to your file:

<!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>

This renders the same way in IE/Safari/FF/Opera

回复收藏 0 原文

别靠近我心 2024-12-28 20:52:03

这是一种对齐方式：

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

This is one way to align:

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

回复收藏 0 原文

~没有更多了~