CSS-Problem mit Inline-Block und List-Stil-Bild

Question

Irgendeine Idee, warum, wenn ich display: inline-block auf ein Listenelement anwenden, das List-style-Bild nicht mehr erscheint?

Answer 1

Die wichtigste Stileigenschaft für einen Listeneintrag ist, dass display standardmäßig list-item ist. Diese Einstellung ist der Grund, warum das Element mit der entsprechenden list-style angezeigt wird. Wenn Sie display auf inline-block setzen, wird nur das Listenelement gelöscht, das es zu einem Listenelement macht.

Answer 2

Wenn Sie ein Listenelement wollen inline-block verwenden, aber immer noch Kugeln zeigen, können Sie die Verwendung :: vor Pseudo-Element und den Inhalt Eigenschaft:

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

(\ 25Cf wird der Unicode gefüllt Kreissymbol und \ a0 ist ein nicht brechender Raum).

Answer 3

Sie können float verwenden: links; auf Ihrem li Element und fügen Sie eine minimale Breite und min-Höhe

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