各种内联块显示问题

Question

我的列表设计简单，图像简单，如：

<div class="image_list_tick">

  <ul>
    <li>one</li>
    <li>two</li>
  </ul>

</div>  

CSS是：

.image_list_tick ul {
  list-style-image: url('green-tick2.gif');
  display: inline-block;
}

我在chrome和firefox中尝试了这个代码并得到了奇怪的结果。

FIREFOX：

第二个是我真正想要发生的事情。现在，在Chrome中我也得到了这个：

CHROME：

注意，列表本身应该位于该页面的中间位置，即使它没有在上面的图像中显示。关键是要将列表放在中心位置。

有什么想法吗？

Answer 1

删除display: inline-block。这可能是导致它失控的原因。此外，可能还有其他（可能是一般）样式会影响您的列表。使用firebug或chrome开发人员工具进行调查。

您要执行以下操作：“将列表保持在页面中心对齐，但保持列表项目与列表本身左侧对齐。因此，example应该是您想要的。使用的代码（简化）：

div {
    text-align: center;
}
ul {
    list-style-image: url('http://i779.photobucket.com/albums/yy80/000jericho/tick_green_big.gif'); /* random tick mark I found */
    display: inline-block;
}
li {
    text-align: left;
}

关注K.I.S.S你应该没事。

<强> Here's a working example