Passt die Höhe und Breite nicht zur Spannweite?

157

Insgesamt keine Frage, aber hier.Passt die Höhe und Breite nicht zur Spannweite?

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>

Fiddle

Grundsätzlich Ich versuche, eine Taste zu emulieren, eine Spannweite machen (oder etwas) sehen aus wie eine Schaltfläche neben einem Eingang Feld, das aufgrund eines Auto-Fill-Generators, der bei der Eingabe Fehler generiert, nicht unbedingt einer sein muss. Dachte, das wäre jetzt eine schnelle Lösung, aber offensichtlich nicht.

Danke.

Quelle

2010-03-22 Kyle

Sie auch prüfen wollen, könnten http://stackoverflow.com/questions/2343989/how-to-set-height-property-for-span –

Überprüfen Sie auch den Standard, speziell ht tp: //www.w3.org/TR/CSS2/visudet.html#the-width-property und http://www.w3.org/TR/CSS2/visudet.html#the-height-property, welcher Staat die Eigenschaften "Betrifft: alle Elemente, aber nicht ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen" – outis

287

Span ist ein Inline-Element. Es hat keine Breite oder Höhe.

Sie könnten es in ein Block-Level-Element umwandeln, dann akzeptiert es Ihre Dimension-Direktiven.

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

Quelle

2010-03-22 09:33:41

Danke, behoben. Ich habe versucht Display: Block vor, aber Inline-Block behoben. – Kyle

+13

Das ist das Problem. Wenn 'display: block' angegeben wird, wird span als Inline-Element und Element in der nächsten Zeile angezeigt. Ich brauche ein Element, das inline ist, aber die gewünschte Breite haben kann. – Paul

span s sind standardmäßig inline angezeigt, was bedeutet, dass sie nicht über eine Höhe und Breite haben.

Versuchen Sie eine display: block zu Ihrer Spannweite hinzuzufügen.

Quelle

2010-03-22 09:34:52

Span beginnt als Inline-Element. Sie können zum Beispiel sein Anzeigeattribut ändern, um zu blockieren, und die Attribute Höhe/Breite werden wirksam.

Quelle

2010-03-22 09:35:14

Versuchen Sie, eine div anstelle des span verwenden oder mit der CSS display: block; oder display: inline-block; — span standardmäßig ist ein Inline-Element, das nicht width und height Eigenschaften nehmen.

Quelle

2010-03-22 09:36:34 Isaac

Ein div ist kein semantischer Ersatz für eine Spanne. Ein Bereich ist ein Textcontainer, während ein Bereich ein Layoutcontainer ist. Das Anwenden eines Inline-Block-Stils, wie ihn Developer Art vorgeschlagen hat, ist die richtige Antwort. –

Die Frage liefert keinen Zusammenhang, um anzuzeigen, dass ein div von Natur aus semantisch unangemessen ist. – Isaac

Tatsächlich liest das Op-Markup tatsächlich das fragliche Element wird verwendet, um einfach ein Hintergrundbild anzuzeigen. In diesem Fall wäre ein div tatsächlich passender. -1 aus Isaacs ursprünglichem Kommentar entfernt. –

Span nimmt Breite und Höhe nur, wenn wir es Element blockieren.

span {display:block;}

Quelle

2013-05-20 19:43:41

+12

Ich denke 'display: Inline-Block;' ist besser – 151291

Wie pro Kommentar von @ Paul: Wenn display: block angegeben wird, stoppt Spanne ein Inline-Element und ein Element zu sein, nachdem es auf der nächsten Zeile erscheint.

Ich bin hergekommen Lösung meiner Spannweite Höhe Problem zu finden, und ich habe eine Lösung meiner eigenen

overflow:hidden; Hinzufügen und keeing es wird inline nur getestet in IE8 Quirksmodus

Quelle

2014-03-27 13:08:07

Ich sehe 'Überlauf: versteckt ; in diesem Zusammenhang. "Inhalt ist abgeschnitten, ohne Bildlaufleisten" [sagt MDN] (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). Scheint kontraintuitiv. Was macht es hier? –

Inspiriert von @ das Problem lösen Hamed, habe ich die folgenden und es funktionierte für mich:

display: inline-block; overflow: hidden;

Quelle

2016-06-17 08:05:15 olleh

Passt die Höhe und Breite nicht zur Spannweite?

Antwort

Verwandte Themen