Como definir a propriedade de altura para SPAN


88

Eu preciso tornar o seguinte código extensível com altura predefinida

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

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

Mas como span é um elemento embutido, a propriedade "height" não funcionará.

Tentei usar div em vez disso, mas ele se expandirá até a largura do elemento superior. E a largura deve ser flexível.

Alguém pode sugerir alguma boa solução para isso?

Desde já, obrigado.


1
Você deve usar tags de título (h1, h2, h3, ...) para títulos. É mais semanticamente correto.
Pickels

1
Sim, você está certo, Pickels. Obrigado a todos por sua ajuda. Este é meu css final. Funciona muito bem para mim: <style> h4 {display: inline-block; zoom: 1; * display: embutido; margem: 0px; altura: 25px; } </style>
Kelvin

Respostas:


142

Dê um display:inline-blockem CSS - isso deve permitir que ele faça o que você quiser.
Em termos de compatibilidade: IE6 / 7 vai trabalhar com esta, como o modo de peculiaridades sugere:

O IE 6/7 aceita o valor apenas em elementos com uma exibição natural: embutido.


Pelo que vale a pena, o IE7 não oferece suporte inline-block.
Scott Cranfill

Np. @Scott: Não vejo isso no W3 - aqui está o que dizem: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 está correto, não posso usá-lo por causa de erros também: quirksmode.org/css/display.html
Nick Craver

2
Citação:IE 6/7 accepts the value only on elements with a natural display: inline.
casraf

1
Ahah, acho que funcionará se aplicado a um spanthen. Obrigado pela informação, henasraf.
Scott Cranfill


13

isso é para fazer display: inline-block funcionar em todos os navegadores:

Curiosamente, no IE (6/7), se você acionar o hasLayout com "zoom: 1" e, em seguida, definir a exibição para embutir, ele se comportará como um bloco embutido.

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

5

Supondo que você não queira torná-lo um elemento de bloco, você pode tentar:

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

Mas a solução mais fácil é simplesmente tratar o .titlecomo um elemento de nível de bloco, e usando as tags título apropriado <h1>através <h6>.


0

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

Para que os spans funcionem como uma célula de tabela (ou qualquer outro elemento, nesse caso), a altura deve ser especificada. Eu dei uma altura aos vãos e eles funcionam bem - mas você deve adicionar altura para que eles façam o que você deseja.


0

Outra opção, claro, é usar Javascript (Jquery aqui):

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

-4

Por que você precisa de um intervalo neste caso? Se você quiser estilizar a altura, pode usar um div? Você pode tentar um div com display: inline, embora isso possa ter o mesmo problema, já que você estaria fazendo a mesma coisa que um span.


3
Ou ignore minhas divagações completamente e use a resposta de henasraf :)
Seth Petry-Johnson

Votar negativamente nos comentários apenas desencoraja aqueles que desejam contribuir legitimamente. Pare! Em vez disso, ofereça algum feedback construtivo ou, provavelmente, mais especificamente, sua opinião sobre o assunto.
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.