Gilt Höhe und Breite nicht für die Spannweite?

254

Total noob Frage, aber hier.

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

Geige

Grundsätzlich versuche ich, eine Schaltfläche zu emulieren, einen Bereich (oder etwas anderes) wie eine Schaltfläche neben einem Eingabefeld aussehen zu lassen, das aufgrund eines automatischen Füllgenerators, der bei Eingabe Fehler generiert, eigentlich keine sein muss. Ich dachte, dies wäre eine schnelle Lösung für den Moment, aber offensichtlich nicht.

Vielen Dank.

css html width Kyle
quelle
2
Vielleicht möchten Sie auch stackoverflow.com/questions/2343989/…
Edan Maor
2
Überprüfen Sie auch den Standard, insbesondere w3.org/TR/CSS2/visudet.html#the-width-property und w3.org/TR/CSS2/visudet.html#the-height-property , in dem die Eigenschaften "Gilt für: Alle Elemente außer nicht ersetzten Inline-Elementen, Tabellenzeilen und
Zeilengruppen

Antworten:

426

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

Sie können es in ein Element auf Blockebene verwandeln, dann akzeptiert es Ihre Dimensionsanweisungen.

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}
Basheer AL-MOMANI
quelle
9
Danke, habe es behoben. Ich habe versucht, display: block vor, aber Inline-Block hat es behoben.
Kyle
21
Das ist das Problem. Wenn display: blockangegeben, wird span angehalten, um ein Inline-Element und ein Element zu sein, nachdem es in der nächsten Zeile angezeigt wird. Ich brauche ein Element, das inline ist, aber die gewünschte Breite haben könnte.
Paul
6
Eine bessere Lösung ist die Benutzeranzeige: Inline-Block
Anant
37

Versuchen Sie, eine Verwendung divanstelle der spanoder über die CSS display: block;oder display: inline-block;- spanist standardmäßig ein Inline - Element , das nicht nehmen widthund heightEigenschaften.

Isaac
quelle
9
Ein Div ist kein semantischer Ersatz für eine Spanne. Ein Bereich ist ein Textcontainer, während ein div ein Layoutcontainer ist. Das Anwenden eines Inline-Block-Stils, wie er von Developer Art vorgeschlagen wurde, ist die richtige Antwort.
Brian Scott
3
Die Frage bietet keinen Kontext, der darauf hinweist, dass ein div semantisch von Natur aus unangemessen ist.
Isaac
1
Beim Lesen des Markups der Operation sieht es tatsächlich so aus, als würde das betreffende Element verwendet, um einfach ein Hintergrundbild anzuzeigen. In diesem Fall wäre ein div tatsächlich angemessener. -1 aus Isaacs ursprünglichem Kommentar entfernt.
Brian Scott
Außerdem habe ich versucht, ein Div zu verwenden, bevor ich zu Span gewechselt bin. Es wird immer unter dem vorherigen Div angezeigt. Also ging es mit Span :)
Kyle
22

Inspiriert von @Hamed habe ich Folgendes hinzugefügt und es hat bei mir funktioniert:

display: inline-block; overflow: hidden;
olleh
quelle
11

Span nimmt nur dann Breite und Höhe an, wenn wir es zu einem Blockelement machen.

span {display:block;}
Touhid Rahman
quelle
14
Ich denke display: inline-block;ist besser
151291
Wenn Sie dies tun, ändern Sie sich für alle Bereiche. Ich würde empfehlen, eine Klasse zu verwenden.
Hola Soja Edu Feliz Navidad
9

Gemäß dem Kommentar von @Paul: Wenn display: block angegeben ist, wird span angehalten, um ein Inline-Element und ein Element zu sein, nachdem es in der nächsten Zeile angezeigt wird.

Ich bin hierher gekommen, um eine Lösung für mein Problem mit der Spannweite zu finden, und habe eine eigene Lösung gefunden

Durch Hinzufügen overflow:hidden;und Inline-Keeing wird das Problem gelöst, das gerade im IE8 Quirks-Modus getestet wurde

Hamed Ali Khan
quelle
Ich sehe overflow:hidden;in diesem Zusammenhang immer wieder. "Der Inhalt wird ohne Bildlaufleisten abgeschnitten", sagt MDN . Scheint nicht intuitiv zu sein. Was macht es hier?
Bob Stein
8

spans werden standardmäßig inline angezeigt, dh sie haben keine Höhe und Breite.

Versuchen Sie display: block, Ihrer Spanne ein hinzuzufügen .

Edan Maor
quelle
6

Span beginnt als Inline-Element. Sie können beispielsweise das Anzeigeattribut in Block ändern, und die Höhen- / Breitenattribute werden wirksam.


quelle
2

span {display:block;} fügt auch einen Zeilenumbruch hinzu.

Um dies zu vermeiden, verwenden Sie span {display:inline-block;}und dann können Sie dem Inline-Element Breite und Höhe hinzufügen und es auch innerhalb des Blocks ausrichten:

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

mehr hier

Markierung
quelle