Come rendere <span> la stessa altezza di <input type = "text">

Sto provando a mettere un elemento a sinistra di un elemento, tuttavia non riesco a renderli della stessa altezza e allineare con altro. Lo span sembra sempre essere posizionato un po 'più in alto.Come rendere <span> la stessa altezza di <input type = "text">

Qualcuno ha qualche idea?

Sparkles *

Edit: sezione HTML

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

fonte

2010-11-18 Sparkles

Si prega di inserire una parte del codice, la soluzione varia a seconda del tipo di tag utilizzati –

Se stai cercando di etichettare i campi di input, provare il Etichetta tag (http://www.w3schools.com/tags/tag_label.asp) –

Se si desidera allineare verticalmente oggetti nella stessa linea, probabilmente non lo fai necessità per renderli della stessa altezza - basta dare loro lo stesso valore per la proprietà vertical-align.

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

Che un sacco di gente non capisce con vertical-align è che per sapere cosa c'è da essere allineati verticalmente a metà, tutto in quella linea deve avere una proprietà vertical-align di 'middle' - non solo una cosa (come la durata).

Immagina una linea orizzontale invisibile che funziona con qualsiasi contenuto in linea. Di solito la linea di base del testo e la parte inferiore delle immagini sono allineate con questa linea. Tuttavia, se si modifica l'allineamento verticale con il centro, il centro dell'elemento (estensione del testo, immagine, ecc.) È allineato con questa linea. Tuttavia, questo non si allineerà verticalmente con altri oggetti se stanno ancora allineando il loro fondo o linea di base a quella linea - essi dovrebbero anche allineare il loro centro a quella linea.

fonte

2010-11-18 02:59:49 thomasrutter

wow che funziona! ora devo solo abbinare altezze, grazie a tutti! :) – Sparkles

Grazie per "tutto in quella linea deve avere una proprietà di allineamento verticale di 'middle'" ..! –

le altezze dei pozzi possono variare in questo modo attraverso diversi browser. – SuperDuck

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

Tenete a 'arco' mente è un elemento inline, piuttosto che un blocco lev el elemento, quindi le definizioni delle dimensioni non si applicano, a meno che non si usi la proprietà CSS "display: block". Gli elementi in linea ottengono le dimensioni dei contenuti, quindi elementi come le dimensioni dei caratteri sono ciò che definisce l'altezza di tale intervallo.

Inoltre, utilizzerei il tag "label" con l'attributo "for", anziché "span". Ciò rende una struttura migliore e ha il vantaggio di spostare lo stato attivo sull'ingresso facendo clic sull'etichetta .

Il seguente è un esempio a livello di blocco, che consente di pixel per l'allineamento dei pixel per tutti i 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>

fonte

2010-11-18 02:15:20 SuperDuck

howdy, sto già usando il tag prima dell'input, questa è un'estensione nascosta che appare se viene restituito un errore nel modulo. Ho provato il padding, lo rende della stessa dimensione, ma ora si trova un po 'più in alto rispetto alla casella di input. – Sparkles

è perché il bordo della casella di input.se si dispone di uno sfondo o di un bordo visibili e si tenta di allineare pixel per pixel, è possibile utilizzarlo a livello di blocco, poiché l'altezza dei caratteri può variare leggermente a seconda del browser e del sistema. Sto aggiungendo un esempio a livello di blocco alla risposta. – SuperDuck

Ecco una versione leggermente ritoccata del Codice SuperDucks:

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

fonte

2010-11-18 03:12:59

si prega di notare che il blocco in linea non è disponibile sulla piattaforma IE. Sono un fan dei blocchi inline altrimenti =) – SuperDuck

hai ragione, ma a partire da IE8, è supportato, quindi, si spera, un giorno presto, possiamo usarlo senza preoccupazioni –

anche, IE 6/7 supporto inline-block sugli elementi inline, secondo questo, quindi potrebbe funzionare? http://www.quirksmode.org/css/display.html –

Come rendere <span> la stessa altezza di <input type = "text">

risposta

Problemi correlati