2010-12-28 9 views
18

Ich habe eine Spanne, die keinen Inhalt hat, aber ich brauche ein Hintergrundbild (ein Pfeil, übrigens).Spannen mit Hintergrundbild und kein Inhalt

Das Problem ist ohne Inhalt innerhalb der Spannweite der Hintergrund nicht angezeigt wird.

Wie kann ich das lösen?

+0

Warum nicht stattdessen eine Blockebene verwenden? Span ist ein Inline-Element und erfordert, dass das Anzeigeattribut blockiert wird, um das zu tun, was ein div-Element standardmäßig tun würde. – Francisc

Antwort

37

Stellen Sie die Breite ein; und Höhe Eigenschaften der Spannweite.

<span style="width: 90px; height: 90px; background-image: url('bg.jpg'); display:block" /> 
+15

Dies funktioniert nicht ohne 'display: block'. – thirtydot

+0

Bildschirmblock löst das Problem. Vielen Dank thirdiydot – ulima69

+8

'Anzeige: Inline-Block' funktioniert auch. –

1

Versuchen Sie, in ein geschütztes Leerzeichen setzen, d.h .:

<span>&nbsp;</span> 
4

style="padding-left:20px" Set.

oder display:block; width:20px; height:20px einstellen.

-1

Man könnte so etwas tun:

<span style="display:block;width:arrow_width;height:arrow_height;background-image:url('image_name');">&nbsp;</span> 
+0

Die Schriftgröße macht keinen Unterschied. 'Width', 'height' und 'display: block' müssen gesetzt werden. Das ist Alles, was zählt. – JakeParis

0

, wenn Sie es eingestellt es automatisch unter anderem Elemente platzieren zu blockieren, und dies einige Probleme in yyour Design verursachen kann. Um dies zu verhindern, können Sie die Vorteile von Inline und Block zusammen verwenden, indem Sie display:inline-block setzen. Dies wird wie inline platziert und Sie können Höhe und Breite angeben. Ps: Das funktioniert nicht auf ie7.