Php 列表项标记和列表项文本未对齐

我在web浏览器中获得以下结果：

相对于文本，复选标记似乎略微凸起，但我希望文本全部对齐。我该怎么办

我有以下HTML：

<ul class="train">
  <li>
    <p><?php echo $pageContents->getContents("comptrainLI1"); ?></p>
    <ul class="traininner">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>jQuery</li>
      <li>PHP</li>
      <li>SQL</li>
      <li>WordPress CMS</li>
      <li>Magento CMS</li>
    </ul>
  </li>
  <li>
    <p><?php echo $pageContents->getContents("comptrainLI2"); ?></p>
    <ul class="traininner">
      <li>C</li>
      <li>C++</li>
      <li>C#</li>
      <li>Java</li>
    </ul>
  </li>
</ul>

---

根据你在问题中发布的有限代码，我认为不可能知道不对齐的原因。它可能是PHP中的某些内容。所以我发布了一个通用的解决方案

li{
列表样式类型：无；
边缘底部：5px；
}
李：以前{
内容：''；
显示：内联块；
垂直对齐：底部对齐；
填充：10px20px0；
高度：10px；
宽度：10px；
背景图像：url（“http://i.imgur.com/F05JSPD.png");
背景重复：无重复；
}

HTML
CSS
JavaScript
jQuery
PHP
SQL
WordPress CMS
Magento CMS




C
C++
C#
爪哇

我不太确定这是否可以做到。我建议您设置

列表样式图像：none

，并将背景图像设置为li标签。您可以在所有

li

上轻松配置

背景位置

和li元素填充

垂直对齐：顶部

？问题是项目符号充当了一条线。

div#mainContent ul.train {

  list-style-position: inside;

  list-style-image: url("../images/checkmark-round-whiteOnGreen.jpg");

  font-size: 18pt;

}

div#mainContent ul.train ul.traininner {

  padding-left: 20px;

  list-style-image: url("../images/checkmark-round-whiteOnGreen.jpg");

}