La hauteur et la largeur ne s'appliquent-elles pas à la portée?

254

Question noob totale, mais ici.

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>

Violon

Fondamentalement, j'essaie d'émuler un bouton, de faire en sorte qu'un span (ou quelque chose) ressemble à un bouton à côté d'un champ de saisie qui n'a pas besoin d'être un à cause d'un générateur de remplissage automatique qui génère des erreurs surEnter. Je pensais que ce serait une solution rapide pour l'instant, mais évidemment pas.

Merci.

css html width

— Kyle
source

2

Vous pouvez également consulter stackoverflow.com/questions/2343989/…

— Edan Maor

2

Vérifiez également la norme, en particulier w3.org/TR/CSS2/visudet.html#the-width-property et w3.org/TR/CSS2/visudet.html#the-height-property , qui indiquent les propriétés "S'applique à: tous les éléments, mais les éléments en ligne, les lignes de tableau et les groupes de lignes non remplacés "

— outis

426

La portée est un élément en ligne. Il n'a ni largeur ni hauteur.

Vous pouvez le transformer en élément de niveau bloc, puis il acceptera vos directives de dimension.

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}

— Basheer AL-MOMANI
source

9

Merci, corrigé. J'ai essayé display: block before mais le bloc inline l'a corrigé.

— Kyle

21

C'est le problème. Si display: blockest spécifié, span cesse d'être un élément en ligne et un élément après son apparition sur la ligne suivante. J'ai besoin d'un élément qui est en ligne, mais qui pourrait avoir la largeur souhaitée.

— Paul

6

une meilleure solution est d'afficher l'utilisateur: bloc en ligne

— Anant

37

Essayez d'utiliser un divau lieu de spanou en utilisant le CSS display: block;ou display: inline-block;- spanest par défaut un élément en ligne qui ne peut pas prendre widthet heightpropriétés.

— Isaac
source

9

un div n'est pas un remplacement sémantique d'un span. Un span est un conteneur textuel tandis qu'un div est un conteneur de mise en page. L'application d'un style de bloc en ligne comme Developer Art l'a suggéré est la bonne réponse.

— Brian Scott

3

La question ne fournit aucun contexte pour indiquer qu'un div est intrinsèquement inapproprié sémantiquement.

— Isaac

1

En fait, en lisant le balisage de l'op, il semble que l'élément en question soit utilisé pour afficher simplement une image d'arrière-plan. Dans ce cas, un div serait en fait plus approprié. -1 supprimé du commentaire original d'Isaac.

— Brian Scott

De plus, j'ai essayé d'utiliser un div avant de passer à span, il s'affiche toujours sous le div précédent .. Il en est de même pour Span :)

— Kyle

22

Inspiré de @Hamed, j'ai ajouté ce qui suit et cela a fonctionné pour moi:

display: inline-block; overflow: hidden;

— olleh
source

11

L'envergure prend la largeur et la hauteur uniquement lorsque nous en faisons un élément bloc.

span {display:block;}

— Touhid Rahman
source

14

Je pense que display: inline-block;c'est mieux

— 151291

En procédant de cette façon, vous changerez pour toutes les plages, je vous recommande d'utiliser une classe.

— Hola Soy Edu Feliz Navidad

9

Selon le commentaire de @Paul, si display: block est spécifié, span cesse d'être un élément en ligne et un élément après son apparition sur la ligne suivante.

Je suis venu ici pour trouver une solution à mon problème de hauteur de travée et j'ai obtenu ma propre solution

L'ajouter overflow:hidden;et le maintenir en ligne résoudra le problème qui vient d'être testé en mode IE8 Quirks

— Hamed Ali Khan
source

Je continue de voir overflow:hidden;dans ce contexte. "Le contenu est coupé, sans barres de défilement", explique MDN . Semble contre-intuitif. Que fait-il ici?

— Bob Stein

8

spanLes s sont par défaut affichés en ligne, ce qui signifie qu'ils n'ont pas de hauteur et de largeur.

Essayez d'ajouter un display: blockà votre durée.

— Edan Maor
source

6

Span commence comme un élément en ligne. Vous pouvez changer son attribut d'affichage en bloc, par exemple, et ses attributs hauteur / largeur commenceront à prendre effet.

2

span {display:block;} ajoute également un saut de ligne.

Pour éviter cela, utilisez span {display:inline-block;}et puis vous pouvez ajouter la largeur et la hauteur à l'élément en ligne, et vous pouvez également l'aligner dans le bloc:

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

plus ici

— marquage
source