Jak ustawić właściwość wysokości dla SPAN

88

Potrzebuję rozciągnięcia następującego kodu z predefiniowaną wysokością

<style>
.title{
   background: url(bg.gif) no-repeat bottom right;
   height: 25px;
}
</style>

<span class="title">This is title</span>

Ale ponieważ span jest elementem wbudowanym, właściwość „height” nie będzie działać.

Próbowałem zamiast tego użyć div , ale rozszerzy się do szerokości górnego elementu. Szerokość powinna być elastyczna.

Czy ktoś może zaproponować jakieś dobre rozwiązanie na to?

Z góry dziękuję.

css height html

— kelwin
źródło

1

W tytułach należy używać tagów nagłówków (h1, h2, h3, ...). Jest bardziej poprawne semantycznie.

— Pickels

1

Tak, masz rację Pickels. Dziękuję wszystkim za pomoc. To jest mój ostatni css. U mnie działa świetnie: <style> h4 {display: inline-block; powiększenie: 1; * wyświetlacz: inline; margines: 0px; wysokość: 25px; } </style>

— Kelvin

142

Daj mu display:inline-blockw CSS - to powinno pozwolić mu robić to, co chcesz.
Jeśli chodzi o kompatybilność: IE6 / 7 będzie z tym działać, jak sugeruje tryb dziwactw:

IE 6/7 akceptuje wartość tylko dla elementów z naturalnym wyświetlaniem: inline.

— casraf
źródło

Co to jest warte, IE7 nie obsługuje inline-block.

— Scott Cranfill

Np. @Scott: Nie widzę tego na W3 - oto, co mówią:

Note: No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".

— casraf

2

@henasraf - @ Scott ma rację, nie mogę go używać również z powodu szybkich ruchów: quirksmode.org/css/display.html

— Nick Craver

2

Cytat:IE 6/7 accepts the value only on elements with a natural display: inline.

— casraf

1

Aha, myślę, że zadziała, jeśli zastosuje się do spanwtedy. Dzięki za informację, henasraf.

— Scott Cranfill

25

Posługiwać się

.title{
  display: inline-block;
  height: 25px;
}

Jedyną sztuczką jest obsługa przeglądarki. Sprawdź, czy lista obsługiwanych przeglądarek obsługuje blokowanie inline-block tutaj .

— Jon Galloway
źródło

13

ma to na celu zapewnienie działania display: inline-block we wszystkich przeglądarkach:

Co dziwne, w IE (6/7), jeśli wyzwolisz hasLayout za pomocą "zoom: 1", a następnie ustawisz wyświetlacz na inline, zachowuje się jak blok inline.

.inline-block {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

— I. Evries
źródło

5

Zakładając, że nie chcesz, aby był to element blokowy, możesz spróbować:

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

Ale najłatwiejszym rozwiązaniem jest po prostu potraktowanie elementu .titlejako elementu blokowego i użycie odpowiednich tagów nagłówka <h1>through <h6>.

— David mówi, że przywróć Monikę
źródło

0

Zakres { display: table-cell; height: (your-height + px); vertical-align: middle; }

Aby zakresy działały jak komórka tabeli (lub jakikolwiek inny element, jeśli o to chodzi), należy określić wysokość. Podałem wysokość przęseł i działają dobrze - ale musisz dodać wysokość, aby zrobiły to, co chcesz.

— mike s
źródło

0

Inną opcją jest oczywiście użycie Javascript (tutaj Jquery):

$('.box1,.box2').each(function(){
    $(this).height($(this).parent().height());
})

— Ukuser32
źródło

-4

Dlaczego potrzebujesz rozpiętości w tym przypadku? Jeśli chcesz ustawić styl wysokości, możesz po prostu użyć elementu div? Możesz wypróbować element div z display: inline, chociaż może to mieć ten sam problem, ponieważ w rzeczywistości robisz to samo, co span.

— Seth Petry-Johnson
źródło

3

Albo całkowicie zignoruj moje włóczęgi i użyj odpowiedzi henasraf :)

— Seth Petry-Johnson

Komentarze głosujące w dół tylko zniechęcają tych, którzy chcą wnieść legalny wkład. Przestań! Zamiast tego po prostu zaoferuj konstruktywną opinię lub prawdopodobnie bardziej konkretną opinię w tej sprawie.