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

时间:2015-09-12 20:24:19

标签: php html css image html-lists

我在网络浏览器中收到以下结果:

enter image description here

对于文本,复选标记略有提升,但我希望文本全部排成一行。我该怎么办?

我有以下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>

和CSS:

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");

}

1 个答案:

答案 0 :(得分:3)

我认为根据您在问题中发布的有限代码,我们无法知道错位的原因。它可能是你的PHP中的东西。所以我发布了一个通用解决方案。

&#13;
&#13;
li {
    list-style-type: none;
    margin-bottom: 5px;
}

ul.traininner li::before {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    padding: 10px 20px 0 0;
    height: 10px;
    width: 10px;
    background-image: url("http://i.imgur.com/F05JSPD.png");
    background-repeat: no-repeat;
}
&#13;
<ul class="train">
  <li>
    <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>
    <ul class="traininner">
      <li>C</li>
      <li>C++</li>
      <li>C#</li>
      <li>Java</li>
    </ul>
  </li>
</ul>
&#13;
&#13;
&#13;

jsFiddle