Come impostare la proprietà dell'altezza per SPAN

StackOverflow https://stackoverflow.com/questions/2343989

  •  23-09-2019
  •  | 
  •  

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.

È stato utile?

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.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top