html - list-style-image与列表项不在同一级别上吗？

我将图像用于列表项，但未与li项目显示在同一级别。我要添加一个链接到小提琴请看一下。

 #container {
   background: #e3e3e3;
   margin-top: 50px;
 }

 #image {
   margin: 20px;
   width: 900px;
 }

 #title {
   text-align: center;
   font-family: Roboto;
   background: -webkit-linear-gradient(#f35626, #feab3a);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 li {
   line-height: 30px;
   font-family: Roboto;
   font-size: 25px;
   list-style-image: url('https://s3.postimg.org/4qsqurmsj/ic_item_play.png');
 }

<div class="grid_16">

  <ul>

    <li>
      Mark Zuckerberg began programming at a young age--when he was 12 he created a messaging program that his father used in his dental office, allowing the receptionist to notify him of new patients without yelling across the office.
    </li>
    <li>Zuckerberg took a computer graduate class at the nearby Mercy College while still in high school.</li>
    <li>
      His parents even hired a computer tutor to work with the young Zuckerberg, but the tutor admitted that it quickly became difficult to stay ahead of his pupil, referring to him as a "prodigy."
    </li>

  </ul>
</div>

https://jsfiddle.net/n2o79mL7/

最佳答案

不要使用list-style-image

在更新的小提琴中查看我的更改-https://jsfiddle.net/n2o79mL7/1/

我基本上已经从ul中删除了填充，并将图像添加为li的背景，使用background-position和padding正确对齐了列表项。

希望这可以帮助伴侣。

关于html - list-style-image与列表项不在同一级别上吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39434343/