Warum funktionieren die Eigenschaften „Höhe' und „Breite' bei Span-Elementen nicht und wie kann ich dafür sorgen, dass sie funktionieren?

Span-Element und Höhen-/Breiteeigenschaften

In CSS ist das Span-Element ein Inline-Element. Das bedeutet, dass es keine eigene Breite oder Höhe hat und nur so viel Platz einnimmt, wie für den Inhalt benötigt wird. Daher hat das Festlegen von Höhen- und Breiteneigenschaften für ein Span-Element keine Auswirkung.

Sie können das Span-Element jedoch mithilfe der Display-Eigenschaft in ein Element auf Blockebene umwandeln. Für Elemente auf Blockebene können Höhe und Breite angegeben werden, und sie nehmen einen rechteckigen Bereich auf der Seite ein.

Damit das Span-Element wie eine Schaltfläche aussieht, können Sie die Anzeigeeigenschaft auf „inline-block“ oder „block“ setzen . Dadurch können Sie Höhen- und Breiteneigenschaften anwenden und das Element nach Bedarf formatieren.

Hier ist eine aktualisierte Version Ihres CSS-Codes mit der hinzugefügten Anzeigeeigenschaft:

span.product__specfield_8_arrow {
    display: inline-block; /* or block */
    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;
}

Mit dieser Änderung , verhält sich das span-Element wie ein Element auf Blockebene und nimmt die angegebenen Höhen- und Breitenabmessungen an.

Das obige ist der detaillierte Inhalt vonWarum funktionieren die Eigenschaften „Höhe' und „Breite' bei Span-Elementen nicht und wie kann ich dafür sorgen, dass sie funktionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!