How to make <span> gleicher Höhe <input type="text">

Ich versuche ein element nach Links ein element, aber ich kann nicht scheinen, um die gleiche Höhe und Ausrichtung mit einander. Die Spanne scheint immer positioniert werden, ein wenig höher.

Jemand irgendwelche Ideen?

Funkelt*

Edit: HTML-Abschnitt

<label for="name">Username: </label>
<input type="text" name="name" id="name" value="" maxlength="15"/>
<span id="box" style="display:none"></span>

CSS

span.box{
    position:absolute;
    width:100px;
    margin-left:20px;
    border:1px;
    padding:2px;
    height: 16px;
}

input.name {
    width: 115px;
    height: 14px;
}

Bitte setzen Sie einen Teil Ihres Codes, der Lösung variiert je nach Art der verwendeten tags
Wenn Sie versuchen, label, Eingabefelder, versuchen Sie das Label-tag ( w3schools.com/tags/tag_label.asp )

InformationsquelleAutor Sparkles | 2010-11-18

14

Wenn Sie möchten, vertikal ausrichten von Elementen in der gleichen Zeile, werden Sie wahrscheinlich nicht Sie müssen die gleiche Höhe haben - nur geben Sie den gleichen Wert für die vertical-align Eigenschaft.
```
.myinput, .myspan {
  vertical-align: middle;
}
```
Was viele Leute nicht verstehen, die mit vertical-align ist, dass, um für Dinge zu sein, die vertikal ausgerichtet in der Mitte, alles in dieser Zeile muss einen vertical-align-Eigenschaft der "Mitte" - nicht nur eine Sache (wie der span).

Stellen Sie sich eine unsichtbare horizontale Linie, obwohl alle inline-Inhalte. In der Regel wird die Grundlinie des Texts, und die unteren Bilder, aufgereiht sind mit dieser Linie. Wenn Sie jedoch ändern vertical-align auf middle, dann in der Mitte des Elements (text, span, Bild, etc) ausgerichtet ist auf dieser Linie. Aber das geht nicht, die vertikal mit anderen Sachen, wenn Sie noch die Ausrichtung Ihrer unteren oder an der Grundlinie zu, die Linie - Sie brauchen würde, um zu richten Ihre Mitte, um die Linie zu.

wow, das funktioniert! jetzt habe ich nur übereinstimmen, Höhen, vielen Dank an alle! 🙂
Vielen Dank für "alles, was in dieser Zeile muss einen vertical-align-Eigenschaft der 'Mitte'"..!
auch Höhen können variieren durch die verschiedenen Browser diese Weise.

InformationsquelleAutor thomasrutter
0

hier ist eine leicht retuschierte version von SuperDucks code:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
    .lbl {
        background-color:lime;
        padding:0;
    line-height: 24px;
    height: 24px;
    display: inline-block;
    }
    .t {
        height:17px;
        padding:0;
        height: 20px;
        display: inline-block;
    }
</style>
</head>
<body>
    <span class="lbl">My label : </span>
    <input class="t" type="text" name="t">
</body>
```
bitte beachten Sie, dass inline-block ist nicht auf IE Plattform. Ich bin ein fan von inline-blocks sonst =)
du hast Recht, aber beginnend mit IE8, seine unterstützten, so, hoffentlich, irgendwann bald, wir können es verwenden, ohne sorgen
auch, IE 6/7 support inline-block auf inline-Elemente, nach dieser, so könnte es funktionieren? quirksmode.org/css/display.html
ich, den dont' ie, aber ich würde gerne wissen, danke für den Kommentar
ja, es war zu spät, um den Kommentar Bearbeiten, ich war gonna hinzufügen. IE7:n/a IE8:problematisch support, beginnt es mit IE9, aber nehmen wir noch den IE7 berücksichtigen. Und ich höre dir zu, auch ich benutze nie den IE, außer testen einer website für es, FX ist die erste software, die ich installieren bei der Installation eines OS =)

InformationsquelleAutor Sebastian Patane Masuelli

Versuchen Polsterung :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
    <style type="text/css">
        .lbl {
            background-color:lime;
            padding:0;
        }
        .t {
            height:17px;
            padding:0;
        }
    </style>
</head>
<body>
    <span class="lbl">My label : </span>
    <input class="t" type="text" name="t">
</body>

Halten Sie im Verstand 'span' ist ein inline-element, sondern als ein block-level-element, also für die Größe Definitionen gelten nicht, , es sei denn, Sie verwenden 'display:block' CSS-Eigenschaft. Inline-Elemente die Größe der Inhalte, so dass Dinge wie font-size sind das, was definieren Sie die Höhe des span.

Auch ich verwenden würde, 'label' tag mit der 'für' - Attribut, sondern als ein 'span'. Dies macht eine bessere Struktur, und hat den Vorteil, verschieben Sie den Fokus auf die Eingang, indem Sie auf die label.

Folgende ist ein block-level Beispiel, die erlaubt, pixel für pixel alignment für jeden browser:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
    <style type="text/css">
.lbl {
    background-color: lime;
    border: 1px solid silver;
    display: block;
    float: left;
    font-size: 12px;
    height: 16px;
    padding: 2px;
    width: 100px;
}
.t {
    border: 1px solid silver;
    display: block;
    float: left;
    font-size: 12px;
    height: 16px;
    margin-left: 4px;
    padding: 2px;
    width: 150px;
}
    </style>
</head>
<body>
    <label class="lbl">My label : </label>
    <input class="t" type="text" name="t">
</body>

howdy, ich bin schon mit <label> - tag vor den Eingang, dies ist eine versteckte span -, die angezeigt wird, wenn ein Fehler zurückgegeben wird, um die form. Ich habe versucht, die Polsterung, es ist die gleiche Größe, aber jetzt sitzt ein wenig höher als das Eingabefeld.
das ist, weil die Grenze der input-box. wenn Sie einen sichtbaren hintergrund oder Grenze, und versucht zu richten, pixel für pixel, dann können Sie es verwenden, auf block-Ebene, als Schrifthöhen variieren ein wenig je nach browser und system. Ich bin das hinzufügen einer block-Ebene-Beispiel für die Antwort.

InformationsquelleAutor SuperDuck

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.