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

Réponses:

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
la 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
la 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
la source
11

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

span {display:block;}
Touhid Rahman
la 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
la 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
la 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.


la source
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
la source