HTML-Formular - Ausrichtung- Eingang mit Etikett

Ich versuche, diesen für die zugänglich für alle Browser. Verschiedene Browser geben unterschiedliche Ergebnisse (mit IE die meisten problematisch für mich). Ich habe screenshots, so dass Sie sehen können, was ich bin reden über.

Dies ist, wie die form aussieht, in Safari, Firefox und Chrome:

HTML-Formular - Ausrichtung- Eingang mit Etikett

http://imageshack.us/photo/my-images/210/bildschirmfoto20120226u.png/

Dies ist, wie die form aussieht, im IE6 und IE7:

HTML-Formular - Ausrichtung- Eingang mit Etikett

http://imageshack.us/photo/my-images/37/bildschirmfoto20120226u.png/

Und das ist IE8 und IE9:

HTML-Formular - Ausrichtung- Eingang mit Etikett

http://imageshack.us/photo/my-images/39/bildschirmfoto20120226u.png/

HTML

<form method="post" action="?test" id="form">
    <label for="user">USERNAME</label>
    <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
    <div id="empty-user" class="fail">This stuff will get replaced by the title contents.</div>
    <label for="password" class="clear">PASSWORD</label>
    <input type="password" name="password" id="password" maxlength="100" title="Please enter your password." data-h5-errorid="empty-password" tabindex="2" required />
    <div id="empty-password" class="fail">This stuff will get replaced by the title contents.</div>
</form>

CSS

label {
    background: yellow;
    font-size: 12px;
    font-weight: bold;
    width: 100px;
    float: left;
    margin-right: 50px;
    text-align: right;
    cursor: pointer;
}

input {
    height: 30px;
    background-color: #fafafa; 
    border: 1px solid #abaaaa;
    width: 300px;
    margin: 5px 0 5px 0;
    float: right;
}

Nun meine Frage, wie kann ich richten Sie die Etiketten, so dass Sie vertikal ausgerichtet sind mit den input-Feldern? Ich habe die Suchfunktion benutzt, hier und die meiste Zeit so etwas wie

vertical-align: middle;

ist empfohlen, aber das funktioniert nicht bei allen. Nur der fix für Safari, Chrome und Firefox ist das hinzufügen von ein margin-top oder padding-top des labels, aber dies zerstört die form, in IE8 und IE9.

Was kann ich tun gegen dieses Problem? Fallenlassen der Höhe, auf der sich das Eingabefeld ist nicht eine option für mich.

Ich würde wirklich empfehlen nicht mit element Selektoren wie diese; verwenden Sie class Selektoren wie form label.text oder ein Nachfahre-Selektor wie #form label. Nur so ist es nicht auf jeden - element dieses Typs auf der Seite.
Ok danke, ich werde die chance!

InformationsquelleAutor Sven | 2012-02-26

  1. 4

    setzen Sie ein clear:both nach dem input-tag (irgendwo).

    Ich würde vorschlagen, die Sie hinzufügen, mehr markup, um Ihre Formulare für zusätzliche Anpassung. Normalerweise ich mag zu tun ist, Formen wie diese:

    <div class="field">
    <label for="user">USERNAME</label>
    <div class="field-subject">
        <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
    </div>
</div>

.field { 
    overflow: auto; /* this "clears" the floated elements */
    margin-bottom: 10px;
}

.field label {
    float: left;
    width: 200px;
}

.field .field-subject {
    float: left;
    width: 500px;
}
    Das wird vertical-align den text in der labels?
    Ich bin sicher, Sie könnten versuchen... Wenn das nicht funktioniert, Sie konnte die Beschriftung auf display: block und fügen Sie etwas margin / padding.

    InformationsquelleAutor Matthew

Schreibe einen Kommentar