A altura e a largura não se aplicam à extensão?

254

Pergunta noob total, mas aqui.

CSS

.product__specfield_8_arrow {

    /*background-image:url(../../upload/orng_bg_arrow.png);
    background-repeat:no-repeat;*/
    background-color:#fc0;
    width:50px !important;
    height:33px !important;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
    cursor:pointer;
}​​​

HTML

<span class="product__specfield_8_arrow">&nbsp;</span>​

Violino

Basicamente, estou tentando emular um botão, fazer um intervalo (ou algo assim) parecer um botão ao lado de um campo de entrada que realmente não precisa ser um por causa de um gerador de preenchimento automático que gera erros no Enter. Pensei que isso seria uma solução rápida por enquanto, mas obviamente não.

Obrigado.

css html width Kyle
fonte
2
Você também pode querer conferir stackoverflow.com/questions/2343989/…
Edan Maor
2
Verifique também o padrão, especificamente w3.org/TR/CSS2/visudet.html#the-width-property e w3.org/TR/CSS2/visudet.html#the-height-property , que declara as propriedades "Aplica-se a: todos os elementos, exceto elementos inline não substituídos, linhas da tabela e grupos de linhas "
out

Respostas:

426

Span é um elemento embutido. Não tem largura ou altura.

Você pode transformá-lo em um elemento no nível do bloco, e ele aceitará suas diretrizes de dimensão.

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}
Basheer AL-MOMANI
fonte
9
Obrigado, consertou. Eu tentei exibir: bloquear antes, mas o bloco embutido corrigiu.
Kyle
21
Esse é o problema. Se display: blockfor especificado, o span deixará de ser um elemento embutido e um elemento depois que ele aparecer na próxima linha. Preciso de um elemento em linha, mas que possa ter a largura desejada.
Paul
6
uma solução melhor é a visualização do utilizador: inline-bloco
Anant
37

Tente usar uma divvez do spanou usando o CSS display: block;ou display: inline-block;- spané, por padrão um elemento inline que não pode tomar widthe heightpropriedades.

Isaac
fonte
9
uma div não é um substituto semântico para um período. Uma extensão é um contêiner de texto enquanto uma div é um contêiner de layout. A aplicação de um estilo de bloco embutido, como sugerido pela Developer Art, é a resposta correta.
Brian Scott
3
A pergunta não fornece contexto para indicar que uma div é inerentemente inadequada semanticamente.
Isaac
1
Na verdade, ao ler a marcação da operação, parece que o elemento em questão está sendo usado para simplesmente exibir uma imagem de plano de fundo. Nesse caso, uma div seria realmente mais apropriada. -1 removido do comentário original de Isaac.
Brian Scott
Além disso, eu tentei usar um div antes de mudar para extensão, ele sempre exibe sob o div anterior .. Então fui com Span :)
Kyle
22

Inspirado no @Hamed, adicionei o seguinte e funcionou para mim:

display: inline-block; overflow: hidden;
olleh
fonte
11

A extensão ocupa largura e altura somente quando o fazemos bloquear o elemento.

span {display:block;}
Touhid Rahman
fonte
14
Eu acho que display: inline-block;é melhor
151.291
Dessa maneira, você mudará para todos os períodos, eu recomendaria o uso de uma classe.
Hola Soy Edu Feliz Navidad
9

De acordo com o comentário de @Paul, se o bloco display: for especificado, o span deixará de ser um elemento inline e um elemento depois que ele aparecer na próxima linha.

Eu vim aqui para encontrar solução para o meu problema de altura do vão e eu tenho uma solução própria

Adicionando overflow:hidden;e keeing-lo em linha vai resolver o problema apenas testado no modo IE8 Quirks

Hamed Ali Khan
fonte
Eu continuo vendo overflow:hidden;neste contexto. "O conteúdo é cortado, sem barras de rolagem", diz MDN . Parece contra-intuitivo. O que faz aqui?
Bob Stein
8

spanPor padrão, os s são exibidos em linha, o que significa que eles não têm altura e largura.

Tente adicionar um display: blockao seu período.

Edan Maor
fonte
6

O período começa como um elemento embutido. Você pode alterar seu atributo de exibição para bloquear, por exemplo, e seus atributos de altura / largura começarão a ter efeito.


fonte
2

span {display:block;} também adiciona uma quebra de linha.

Para evitar isso, use span {display:inline-block;}e, em seguida, você pode adicionar largura e altura ao elemento embutido e também pode alinhá-lo dentro do bloco:

span {
        display:inline-block;
        width: 5em;
        font-weight: normal;
        text-align: center
     }

mais aqui

marcação
fonte