Проблема с CSS с встроенным блоком и списком-образ-образ

Question

Любая идея, почему, когда я применяю display: inline-block к элементу списка, изображение в стиле списка перестает появляться?

Answer 1

Наиболее важным свойством стиля для элемента списка является то, что его display по умолчанию равен list-item. Этот параметр является причиной, по которой элемент отображается с соответствующим list-style. Установка display на inline-block удаляет единственное, что связано с вашим элементом списка, что делает его элементом списка.

Answer 2

Если вы хотите, элемент списка использовать встроенный блок, но до сих пор показывают пули, вы можете использовать :: до того псевдо элемента и свойства содержимого:

li { 
display: inline-block; 
} 
li::before { 
content: '\25cf\a0'; 
} 

(\ 25cf заполнится Unicode символ круг и \ a0 - неразрывное пространство).

Answer 3

Вы можете использовать float: left; на вашем элементе li и добавьте минимальную ширину и минимальную высоту

.footer ul li{ 
    float: left; 
    list-style-image: url(../images/arrow.png); 
    margin: 0px 0px 10px 0px; 
    box-sizing: border-box; 
    min-height: 38px; 
    min-width: 300px; 
}