Использование фонового изображения для li

Я использую фоновое изображение для <li>, которое будет использоваться как кнопка, но оно не полностью отображается; однако при написании текста он показывает. Я не хочу, чтобы текст был написан уже на фоновом изображении. Я не могу установить ширину - как я могу это исправить?

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

Ответы

Ответ 1

Ваша проблема заключается в настройке отображения на встроенный. Если вам нужен фон и ширина, но вам также нужен список встроенного типа, установите float: left.

Ответ 2

Взгляните на следующий пример:

   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; 
        }

Ответ 3

Да, у меня такая же проблема, я просто удалил CSS-стиль display: inline и добавлю display: list-item; float:left; мою проблему, надеюсь, что это поможет.

Спасибо, Sankar B

Ответ 4

установите ширину и высоту изображения

Ответ 5

Может помочь в этом

.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;}

Ответ 6

Мы можем просто добавить следующее правило CSS:

ul.check-list{  
    list-style-image: url(images/tick.jpg);
}