Question

我有一个简单的列表，并希望使用list-style-image来设置列表项的图像。我在列表项上设置了text-align：center，因为我希望列表项与列表图像一起位于屏幕的中心。

这正是我希望它在Firefox中工作的方式。但在chrome中，列表样式图像与屏幕的最左侧对齐。知道为什么会这样做，我怎么能在chrome上修复这个bug？

我在这里制作了一个JSFiddle，你可以看到我希望它出现在firefox上以及chrome上的问题：
https://jsfiddle.net/jhchmo5w/1/

<div class="discover-content">
   <ul>
    <li>List Item 1</li>
    <li>List Item Item 2</li>
    <li>List Item Item Item 3</li>
    <li>List 4</li>
    <li>List Item b 5</li>
    <li>List Item cd 6</li>
   </ul>
</div>

.discover-content ul li {text-align: center;}
.discover-content ul li {
            margin-top: 9px; 
            padding-left: 12px;
            list-style: none;
            list-style-position: outside;
            list-style-image: url(http://www.expertfrontend.com/icons/tick-red.png);
             text-align: center;
        }

Answer 1

list-style-position: inside;适用于Chrome和Firefox。

Answer 2

只需移除list-style-position:outside并添加list-style-position:inside即可获得images and text上的centre。

检查出来......

.discover-content ul li {
  text-align: center;
}
.discover-content ul li {
  margin-top: 9px;
  padding-left: 12px;
  list-style: none;
  list-style-image: url(http://www.expertfrontend.com/icons/tick-red.png);
  list-style-position: inside;
  text-align: center;
}

<div class="discover-content">
  <ul>
    <li>List Item 1</li>
    <li>List Item Item 2</li>
    <li>List Item Item Item 3</li>
    <li>List 4</li>
    <li>List Item b 5</li>
    <li>List Item cd 6</li>
  </ul>
</div>

list-style-image在chrome中无法正常工作

2 个答案: