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

Ich versuche, ein Element auf der linken Seite eines Elements, aber ich kann nicht scheinen, um sie auf die gleiche Höhe und Ausrichtung mit jedem andere. Die Spannweite scheint immer etwas höher zu liegen.Wie man <span> die gleiche Höhe wie <input type = "text">

Wer hat irgendwelche Ideen?

Sparkles *

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

Quelle

2010-11-18 Sparkles

Bitte legen Sie einen Teil Ihres Codes, variiert die Lösung von der Art von Tags in Abhängigkeit –

verwendet Wenn Sie versuchen, Eingabefelder zu beschriften, versuchen die Label-Tag (http://www.w3schools.com/tags/tag_label.asp) –

Wenn Sie Einzelteile in der gleichen Zeile vertikal ausrichten möchten, haben Sie wahrscheinlich nicht Notwendigkeit um sie auf die gleiche Höhe zu bringen - gib ihnen einfach den gleichen Wert für die Eigenschaft vertical-align.

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

Was viele Menschen ist nicht mit vertical-align versteht, dass für Dinge senkrecht zur Mitte ausgerichtet werden, alles in dieser Linie eine vertical-align Eigenschaft von ‚Mitte‘ haben, um hat - nicht nur eine Sache (wie die Spannweite).

Stellen Sie sich eine unsichtbare horizontale Linie vor, die durch irgendeinen Inline-Inhalt läuft. Normalerweise sind die Grundlinie des Textes und die Unterseite der Bilder mit dieser Linie ausgerichtet. Wenn Sie jedoch die vertikale Ausrichtung zur Mitte ändern, wird die Mitte des Elements (Textspanne, Bild usw.) mit dieser Linie ausgerichtet. Allerdings wird sich das nicht vertikal mit anderen Objekten ausrichten, wenn sie immer noch ihren Boden oder ihre Grundlinie an diese Linie anpassen - sie müssten ihre Mitte auch an dieser Linie ausrichten.

Quelle

2010-11-18 02:59:49 thomasrutter

wow das funktioniert! Jetzt muss ich nur Höhen erreichen, danke an alle! :) – Sparkles

Danke für "alles in dieser Zeile muss eine vertikale Ausrichtung Eigenschaft von" Mitte "haben ..! –

Brunnenhöhen können durch verschiedene Browser auf diese Weise variieren. – SuperDuck

Try padding:

<!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>

in 'Spanne' Denken Sie daran, ist ein Inline-Element, eher als ein Block lev el-Element, so dass keine Größendefinitionen gelten, , es sei denn, Sie verwenden die CSS-Eigenschaft 'display: block'. Inline-Elemente erhalten die Größe des Inhalts, also bestimmen Dinge wie die Schriftgröße die Höhe dieses Bereichs.

Auch ich würde "Label" -Tag mit dem "for" -Attribut, anstatt eine "span" verwenden. Dies ergibt eine bessere Struktur und hat den Vorteil, den Fokus auf den Eingang zu verschieben, indem Sie auf das Label klicken.

Das folgende ist ein Block-Level-Beispiel, das für jeden Browser Pixel für Pixel Ausrichtung erlaubt:

<!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>

Quelle

2010-11-18 02:15:20 SuperDuck

Howdy, ich benutze bereits das Tag vor der Eingabe, dies ist ein versteckter Bereich, der erscheint, wenn ein Fehler an das Formular zurückgegeben wird. Ich habe versucht, die Polsterung, es macht es die gleiche Größe, aber jetzt sitzt es ein wenig höher als die Eingabebox. – Sparkles

das ist, weil der Rahmen des Eingabefeldes.Wenn Sie einen sichtbaren Hintergrund oder Rahmen haben und versuchen, Pixel für Pixel auszurichten, dann können Sie Blockebene verwenden, da die Schrifthöhen je nach Browser und System variieren können. Ich füge ein Blocklevel-Beispiel zur Antwort hinzu. – SuperDuck

hier eine leicht retuschiert 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>

Quelle

2010-11-18 03:12:59

Bitte beachten Sie, dass der Inline-Block auf der IE-Plattform nicht verfügbar ist. Ich bin ein Fan von Inline-Blöcken sonst =) – SuperDuck

Sie haben Recht, aber beginnend mit IE8, unterstützt, so hoffentlich, eines Tages bald, können wir es ohne Sorgen verwenden –

auch, IE 6/7 Unterstützung Inline-Block auf Inline-Elementen, so könnte es funktionieren? http://www.quirksmode.org/css/display.html –

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

Antwort

Verwandte Themen