web-dev-qa-db-fra.com

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

Total question noob, 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'une étendue (ou quelque chose) ressemble à un bouton situé à côté d'un champ de saisie qui n'a pas nécessairement besoin de l'être en raison d'un générateur de remplissage automatique qui génère des erreurs lors de la saisie. Je pensais que ce serait une solution rapide pour le moment mais évidemment pas.

Merci.

csshtmlwidth
236
Kyle

Span est un élément en ligne. Il n'a ni largeur ni hauteur.

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

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

Essayez d'utiliser div au lieu de span ou d'utiliser les éléments CSS display: block; ou display: inline-block; —span est un élément en ligne qui ne peut pas posséder les propriétés width et height.

35
Isaac

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

display: inline-block; overflow: hidden;
19
olleh

Span prend la largeur et la hauteur uniquement lorsque nous en faisons un élément de bloc.

span {display:block;}
9
Touhid Rahman

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

Je suis venu ici pour trouver une solution à mon problème de hauteur d'envergure et j'ai obtenu une solution personnelle

Ajouter overflow:hidden; et le garder en ligne résoudra le problème qui vient d’être testé en mode IE8 Quirks.

8
Hamed Ali Khan

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

Essayez d’ajouter un display: block à votre travée.

7
Edan Maor

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

5
MaxGuernseyIII

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

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

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

plus ici

0
markling