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

Question 1

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ę.

Question 2

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.

Question 3

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 .

Question 4

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

Question 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>.

Question 6

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.

Question 7

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

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

Question 8

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.

Answer 1

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

Answer 2

1

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

Pickels

Answer 3

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

Answer 4

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

Answer 5

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

Scott Cranfill

Answer 6

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

Answer 7

2

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

Nick Craver

Answer 8

2

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

casraf

Answer 9

1

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

Scott Cranfill

Answer 10

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 .

Answer 11

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

Answer 12

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

Answer 13

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.

Answer 14

0

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

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

Ukuser32
źródło

Answer 15

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

Answer 16

3

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

Seth Petry-Johnson

Answer 17

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.

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

Odpowiedzi: