Como definir a propriedade de altura para SPAN

Question

Preciso tornar o código a seguir 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 desde período é um elemento embutido, a propriedade "height" não funcionará.

Eu tentei usar divisão em vez disso, mas 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.

Answer 1

Dê um display:inline-block No CSS - isso deve deixar fazer o que você deseja.
Em termos de compatibilidade: IE6/7 vai Trabalhe com isso, como o Modo Quirks sugere:

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

Answer 2

SharePoint tem serviço de sincronização de perfil de usuário.Ele permite sincronizar detalhes do usuário do anúncio com perfil de usuário do SharePoint.Você pode configurar o mapeamento entre os atributos nas propriedades do perfil de anúncio e do perfil do usuário.Depois de configurar a sincronização, você pode acessar propriedades dos usuários.

Se você precisar enviar apenas e-mail, acho que pode funcionar sem sincronização, apenas pelo usuário.

Se você tiver lista do SharePoint, recomendaria usar o usuário ou grupo para armazenar a lista de nomes.Ele armazena IDs de usuários, mas exibe nomes.

Você pode acessar este valor de campo e enviar e-mail usando o método Workflow ou Sputility SendMail se você desenvolver o código do lado do servidor.Ambos não exigem especificar endereços de e-mail, eles enviam e-mails por usuário.Eu suponho que eles obtêm informações diretamente do usuário.

Answer 3

Isso é para exibir: trabalho em linha em linha em todos os navegadores:

Quirkly o suficiente, no IE (6/7), se você acionar o HasLayout com "Zoom: 1" e, em seguida, defina a tela como embutida, ele se comporta como um bloco embutido.

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

Answer 4

Supondo que você não queira fazer um elemento de bloco, então 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 .title como um elemento em nível de bloco, e usando as tags de cabeçote apropriadas <h1> Através dos <h6>.

Answer 5

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

Para que os vãos funcionem como uma célula de mesa (ou qualquer outro elemento, nesse caso), a altura deve ser especificada. Eu dei uma altura de vãos e eles funcionam bem-mas você deve adicionar altura para fazê-los fazer o que quiser.

Answer 6

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

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

Answer 7

Por que você precisa de uma extensão neste caso? Se você quiser estilizar a altura, você poderia usar uma div? Você pode tentar uma div com display: inline, embora isso possa ter o mesmo problema, pois você estaria fazendo a mesma coisa que um período.