Hintergrundbild für li verwenden

Question

Ich verwende ein Hintergrundbild für eine <li> die als Schaltfläche verwendet werden soll, aber nicht vollständig angezeigt wird; wenn ich jedoch Text schreibe, wird er angezeigt. Ich möchte nicht, dass der Text geschrieben wird, er ist bereits auf dem Hintergrundbild gedruckt. Ich kann die Breite nicht einstellen - wie kann ich das beheben?

#footernav li#footerlocation
{
    display: inline;
    padding-right: 20px;
    background-image: url(../images/ourlocation.jpg);
    background-repeat: no-repeat;
    background-position: 0 -.2em;
}

Answer 1

Ihr Problem liegt in der Einstellung der Anzeige auf Inline. Wenn Sie Hintergrund und Breite wünschen, aber auch eine Inline-Liste benötigen, setzen Sie float: left.

Answer 2

Schauen Sie sich das folgende Beispiel an:

   ul#footernav li { 
        display:inline; 
        }
    ul#footernav li a{ 
        display:block; 
        width:155px;
        text-indent:-9999px;
        }
    ul#footernav li.footerlocation a{ 
        height:30px ; 
        background: url('images/image.jpg') bottom left no-repeat; 
        }
    ul#footernav li.footerlocation a:hover{ 
        height:30px ; 
        background: url(images/image.jpg) top left no-repeat; 
        }

Answer 3

Ja, ich habe das gleiche Problem, ich habe gerade css Stil entfernt display: inline und hinzufügen display: list-item; float:left; mein Problem gelöst, ich hoffe das hilft.

Danke, Sankar B.

Answer 4

Die Breite und Höhe des Bildes festlegen

Answer 5

Vielleicht hilft das ja

.tab-content ul li{display: block;padding-left: 30px;background-image:url('images/blue-icon.png');background-repeat: no-repeat;background-position: 0 2px;margin-bottom: 10px;}