CSS label vertikale Ausrichtung mit Eingabefeldern

Ich bin der Gestaltung des Formulars, um uesd werden auf vielen Seiten in einem online-system. Ein eifriger Benutzer der Tabellen für diesen Zweck, für viele Jahre, bin ich immer Recht genutzt, um mit Hilfe von CSS + Etiketten für das jetzt.

Eins hab ich noch zu meistern, ist die Art, wie die verschiedenen Browser-pad & position der Beschriftung relativ zum Eingabefeld. Ich gebe ein code-Beispiel, plus eine nahaufnahme, wie es rendert in jedem 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 - jetzt kann ich post ein pic - hier ist, was es sieht aus wie nach Ahmed Masud änderungen. Er hatte Recht - reset.css-Datei, die ich hatte (von http://html5reset.org/) nicht haben Polsterung auf die input-element. Jedoch, auch nach dem anwenden der änderungen gibt es noch eine variation in der Ausrichtung der Basis von text in das label im Vergleich zu, dass in der Eingabe. Firefox ist nun tot-Ebene, und für den IE & Chrom-der label-text ist 1px höher.

Wenn ich den link entfernen, um Sie zurückzusetzen.css, die Dinge ändern sich wieder: Chrome wird zum Toten-Ebene, DH setzt das label 1px höher als die Eingabe von text -, Firefox 1px niedriger als die Eingabe von text. Siehe unten:

CSS label vertikale Ausrichtung mit Eingabefeldern

Sollte ich darauf hinweisen, dass dies ein sehr einfaches layout, es einfach zu versuchen und das problem zu diagnostizieren. Ich werde es sehen alle besser später. Aber zuerst muss ich wissen, wie man alle meine text-line-up in allen Browsern mit einer CSS-Lösung.

können Sie Ihre zurückgesetzt.css bitte?
Es ist aus html5reset.org - Hinzugefügt link oben, zusammen mit der Antwort auf Ihre Antwort unten.

InformationsquelleAutor TMA-1 | 2011-12-19

3

Okay css Ausrichtungen sind wenig eine schwarze Kunst mit CSS2 so lassen Sie mich Ihnen sagen, was passiert:

1) der reset.css-Sie haben wahrscheinlich NICHT das zurücksetzen der Polsterung des input-Elements, die ist, warum Sie immer, dass Sie die 1/2-pixel-Fehler

Versuchen Sie, diese zu Ihrem Stil

So eine Sache ist, zu entfernen, die Polsterung aus Eingang:
```
 input { padding: 0 }
```
Müssen Sie jetzt legen Sie die Höhe der beiden label-und input-Elemente:
```
 .fld { height: 16px; }
 .usr { height: 16px; } 
```
Die andere Sache ist, dass Sie wahrscheinlich wollen, richten Sie die Felder schön untereinander. Eine Möglichkeit, zu erreichen, ist auf dem Etikett ein block mit float left-Eigenschaft:
```
 .usr { display: block; float: left; }
```
und die .fld block sowie:
```
 .fld { display: block }
```
würden Sie wollen, fügen Sie einige weitere Parameter zu p zu machen, rendering etwas mehr ästhetik.

Hier ist, was ich Tat, um Ihre Datei:
```
<!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>
```
Macht dies die gleiche Art und Weise, in IE/Safari/FF/Opera
- Vielen Dank für die Zeit nehmen, zu Antworten - bearbeitet meine ursprüngliche Frage von oben, um Ihre änderungen. Immer noch nicht perfekte Ausrichtung leider.
- Dies ist eine ältere Frage, aber immer noch relevant, da im Mai 2016. Der Grund war für Ahmed in seiner Antwort, und nicht für Sie ist, könnte es daran liegen, dass du mit einem ZOOM. Ich finde, ich bin derzeit kämpfen mit dem GENAU gleichen problem wie du. Jedesmal, wenn ich es perfekt zu bekommen, in FF, wenn ich ZOOMEN manchmal das Etikett nach oben bewegt. So, ich habe anpassen der CSS, um schieben Sie es wieder nach unten, aber das problem ist, dass ich das nächste mal ändern, der zoom wird es ab wieder in die andere Richtung. So frustrierend. Ich habe versucht, viele Lösungen und keine 100%. Auch, manchmal ändern die schriftart, die werden es verursachen, zu gehen, out-of-Ausrichtung auch...
- [Protokolle in stackoverflow zum ersten mal im Jahre - wow - das hat 10.000 Aufrufe!] Es war nicht Zoomen verbunden. Aber das war so lange her, bevor bootstrap kam und machte alles, was die Arbeit in einem breiten Spektrum von Browsern. Also .. vielleicht sollte ich einfach in der Nähe nieder...
- Hey, nicht schließen Sie es nach unten. Die legacy-Daten ist auch nützlich
InformationsquelleAutor Ahmed Masud

Dies ist eine Möglichkeit, 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;
}

InformationsquelleAutor damian

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.