Wie man <span> die gleiche Höhe wie <input type="text"> macht

Question

Ich versuche, ein Element links von einem Element zu platzieren, jedoch scheine ich es nicht schaffen zu können, sie auf die gleiche Höhe zu bringen und auszurichten. Das Element ist immer etwas höher positioniert.

Hat jemand Ideen?

Glitzer*

Bearbeiten: HTML Abschnitt

Benutzername: 

CSS

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

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

Answer 1

Wenn Sie Elemente in derselben Zeile vertikal ausrichten möchten, müssen Sie sie wahrscheinlich nicht auf die gleiche Höhe bringen - geben Sie ihnen einfach den gleichen Wert für die vertical-align Eigenschaft.

.myinput, .myspan {
  vertical-align: Mitte;
}

Was viele Menschen mit vertical-align nicht verstehen, ist, dass alle Elemente in dieser Zeile die Eigenschaft 'Mitte' haben müssen, damit sie vertikal ausgerichtet sind, nicht nur eine Sache (wie das span-Element).

Stellen Sie sich eine unsichtbare horizontale Linie vor, die durch beliebige Inline-Inhalte verläuft. Normalerweise sind die Basislinie des Textes und der untere Rand von Bildern mit dieser Linie ausgerichtet. Wenn Sie jedoch vertical-align auf Mitte ändern, wird die Mitte des Elements (Textspanne, Bild usw.) mit dieser Linie ausgerichtet. Das wird jedoch nicht vertikal mit anderen Elementen ausgerichtet, wenn sie immer noch ihren unteren Rand oder ihre Basislinie mit dieser Linie ausrichten - sie müssten auch ihre Mitte mit dieser Linie ausrichten.

Answer 2

Versuche Padding:

        .lbl {
            background-color:lime;
            padding:0;
        }
        .t {
            height:17px;
            padding:0;
        }

    Meine Beschriftung : 

Bedenke, dass 'span' ein Inline-Element ist, anstelle eines Block-Level-Elements, daher gelten keine Größendefinitionen, es sei denn, du verwendest die 'display:block' CSS-Eigenschaft. Inline-Elemente erhalten die Größe des Inhalts, daher definieren Dinge wie Schriftgröße die Höhe dieses Spans.

Ich würde auch das 'label'-Tag mit dem 'for'-Attribut verwenden, anstelle eines 'span'. Dies ergibt eine bessere Struktur und hat den Vorteil, dass der Fokus auf das input verschoben wird, wenn man auf das label klickt.

Im Folgenden ist ein Block-Level-Beispiel, das eine Pixel-für-Pixel-Ausrichtung für jeden Browser ermöglicht:

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

    Meine Beschriftung :

Answer 3

Hier ist eine etwas überarbeitete Version von SuperDucks Code:

    .lbl {
        background-color: lime;
        padding: 0;
        line-height: 24px;
        height: 24px;
        display: inline-block;
    }
    .t {
        height: 17px;
        padding: 0;
        height: 20px;
        display: inline-block;
    }

    Mein Label :