Come impostare la proprietà dell'altezza per SPAN
Domanda
Devo rendere il seguente codice estensibile con un'altezza predefinita
<style>
.title{
background: url(bg.gif) no-repeat bottom right;
height: 25px;
}
</style>
<span class="title">This is title</span>
Ma da allora arco è un elemento inline, la proprietà "height" non funzionerà.
Ho provato a usare div invece, ma si espanderà fino alla larghezza dell'elemento superiore.E la larghezza dovrebbe essere flessibile.
Qualcuno può suggerire qualche buona soluzione per questo?
Grazie in anticipo.
Soluzione
Dagli un display:inline-block
in CSS - questo dovrebbe consentirgli di fare quello che vuoi.
In termini di compatibilità:IE6/7 Volere lavora con questo, come suggerisce la modalità quirk:
IE 6/7 accetta il valore solo su elementi con visualizzazione naturale:in linea.
Altri suggerimenti
Utilizzo
.title{
display: inline-block;
height: 25px;
}
L'unico trucco è il supporto del browser. Controlla se il tuo elenco di browser supportati gestisce il blocco in linea qui.
questo per far funzionare display:inline-block in tutti i browser:
Abbastanza stranamente, in IE (6/7), se si attiva hasLayout con "zoom:1" e quindi si imposta il display su inline, si comporta come un blocco inline.
.inline-block {
display: inline-block;
zoom: 1;
*display: inline;
}
Supponendo che tu non voglia renderlo un elemento di blocco, potresti provare:
.title {
display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
line-height: 2em; /* or */
padding-top: 1em;
padding-bottom: 1em;
}
Ma la soluzione più semplice è semplicemente trattare il .title
come elemento a livello di blocco e utilizzando i tag di intestazione appropriati <h1>
Attraverso <h6>
.
arco { display: table-cell; height: (your-height + px); vertical-align: middle; }
Affinché le campate funzionino come una cella di tabella (o qualsiasi altro elemento, del resto), è necessario specificare l'altezza.Ho dato alle campate un'altezza e funzionano perfettamente, ma devi aggiungere altezza per farle fare quello che vuoi.
Un'altra opzione ovviamente è usare Javascript (Jquery qui):
$('.box1,.box2').each(function(){
$(this).height($(this).parent().height());
})
Perché hai bisogno di un intervallo in questo caso?Se vuoi modellare l'altezza potresti semplicemente usare un div?Potresti provare un div con display: inline
, anche se ciò potrebbe avere lo stesso problema poiché in effetti faresti la stessa cosa di uno span.