Question

以下是我的代码，其中我使用内联样式将文本与相应的图像对齐但内联css无法正常工作让我知道如何修改以下代码，因此文本将对齐到顶部与相应的图像。

<ul style="font-size:17px;vertical-align:top; margin-top:0;">
<li style="list-style-image: url(images/check.png);">Text is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to top</li>
<li style="list-style-image: url(images/check.png);">Text is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to top</li>

</ul>

Answer 1

您正在尝试创建媒体块，这是网络中最常见的组件之一。 Nicole Sullivan是CSS中最着名的名字之一，他有一篇很好的文章谈论媒体块的性质，并提供了出色的标准实现。

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

我强烈建议您使用她的实现或阅读她的实现方法。

Answer 2

将背景图像的位置设置为左中心

Answer 3

问题不在于您的代码。

您甚至可以删除一些不必要的标记。

导致头痛的图像。需要对其进行调整，以使子弹与文本对齐。

我做了一些修补，它是图像大小。图像高度比缩小它所需的行高

此外，您必须小心verticle-align它并不总是按您期望的方式工作。 Reference

顶部对齐无序列表的文本

3 个答案: