html - 列表文本不会与图像对齐

Question

我的无序列表中的每个列表元素中都有这些图像:

<ul class="bot">
    <li>
       <img src="images/crime.png" class="pil-img">
       <a href="#">Fire</a>
    </li>
</ul>

我希望对齐列表项中的文本，如图所示现在，我为 <img /> 赋予了以下样式我的列表项中的元素:

.pil-img {
    padding-right: 10px;
    margin: 4px 0px 0px 15px;
}

和<a />标签

.bot li a { margin-top: -5px; }

但这似乎行不通。有什么想法吗？
干杯

Answer 1

HTML:

<ul>
  <li><a href="#">Some text</a></li>
  <li><a href="#">Some text</a></li>
</ul>

CSS:

ul li {
  background: url(image.png) no-repeat 100% 0;
  line-height: HEIGHT OF IMAGE (i.e. 100px);
  padding: 0 30px 0 0;
}

有一个开始。我需要知道您图片的尺寸才能为您提供更多帮助。

如果您需要 2 张图片(星号 + 叉号/勾号)，那么您应该将 1 bg 添加到 <li>另一个到<a> .这应该让您走上正确的轨道。