我在网络浏览器中收到以下结果:
对于文本,复选标记略有提升,但我希望文本全部排成一行。我该怎么办?
我有以下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");
}
答案 0 :(得分:3)
我认为根据您在问题中发布的有限代码,我们无法知道错位的原因。它可能是你的PHP中的东西。所以我发布了一个通用解决方案。
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;