html - 如何在 <li> 中添加图像

Question

我想在 <li> 中添加图像不影响 <li> 的大小.我希望图像位于左上角，顶部、底部和左侧的边距为 0，如下所示:

我使用了这个 HTML 代码:

          <li><img src="image.jpg">text</li>

和这个 CSS:

ul li
{
    max-height:52px;
}

ul li img
{
    max-width:52px;
    max-height:52px; 
    margin-top:-15px;
    margin-left:-15px;
    float:left;
}

让它看起来像这样:

对于所有屏幕尺寸来说看起来都不错。但是这样做的方式并不专业。

1. 在 <li> 中添加图像并使顶部、右侧和左侧的边距为 0 的最佳做法是什么？ ?

2. 在本例中，我为 <li> 添加了最大高度让它工作。有没有办法通过父子关系来做到这一点，并根据 <li> 使图像具有交互性？高度？

Answer 1

试试这个

ul {
    list-style-image: url('image.png');
}

在你的 CSS 类中