CSS label vertical alignment with input fields

 

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.

在这里输入图像描述

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:

在这里输入图像描述

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.

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

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;
}
链接地址: http://www.djcxy.com/p/10264.html

上一篇: 是否使用appcelerator自动缩放字体大小适用于Android？

下一篇: CSS标签与输入字段垂直对齐