css - inline-blockとlist-style-imageに関するCSSの問題

Question

display: inline-blockリスト要素に適用すると、list-style-imageが表示されなくなる理由は何ですか？

Answer 1

リストアイテムの最も重要なスタイルプロパティは、displayデフォルトが。であるということlist-itemです。その設定が、要素がそれぞれので表示される理由ですlist-style。を設定displayするinline-blockと、リストアイテムについて、リストアイテムになる唯一のものが削除されます。

Answer 2

list要素でinline-blockを使用しても箇条書きを表示したい場合は、::before疑似要素とcontentプロパティを使用できます。

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

（\ 25cfはUnicodeで塗りつぶされた円の記号で、\ a0は改行しないスペースです）。

Answer 3

float：left;を使用できます。li要素に、min-widthとmin-heightを追加します

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