我在网络浏览器中得到以下结果:
相对于文本,复选标记略微凸起,但我希望文本全部对齐。我该怎么办?
我有以下 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");
}
最佳答案
根据您在问题中发布的有限代码,我认为不可能知道错位的原因。它可能是你的 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;
}
<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>
jsFiddle
关于php - 列表项标记和列表项文本未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32543359/