有没有一种方法可以为列表样式的图像添加边距或填充

Question

我正在尝试创建一个网页。在页面的页脚我有一个列表。我的代码显示第一个图像，而它看起来应该像第二个图像。

我对进行了编码

应该是什么样子

对于代码，您可以从github存储库中看到："https://github.com/nganbarova/Huddle.git">

Answer 1

我建议您为每个LI项使用不同的类，然后使用：：before pseudo元素。然后，你可以在任何需要的地方设计和移动它。

li {
position: relative;
}
li.myClass::before {
content: url('image.png');
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
}

Answer 2

为了得到准确的答案，我需要先查看您的代码，但这里有一些通用的建议。如果您使用的字体很棒，您可以简单地将其添加到样式表文件中：

li i { margin-right:5px; } or li fa { margin-right:5px; }

如果您使用图像作为图标，请使用以下图像：

li img { margin-right:5px }

您可以将边距的属性值更改为任何适合您的值。

Answer 3

您还没有展示您的代码，所以我将为您提供通用且易于理解的缩进方法。但是如果你把代码粘贴到这里，效率会高得多。

1使用flex的方法：

对于父容器(其中有点(，可以指定确切的高度和弹性规则。这些物品将均匀分布在整个容器中：

parent_selector {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 500px;
}

2使用网格的方法：

网格有一个网格间隙规则，可以在不影响第一个元素的情况下设置间距：

parent_selector {
grid-gap: 10px;
}

3使用边距和伪类的方法：not和：第一个类型：

将：not和：first-of-type伪类一起使用将允许缩进除第一个元素之外的每个内部元素。

parent_selector p:not(:first-of-type) {
margin-top: 10px;
}

所有这些方法都很容易使用，但如果您展示您的代码会更好。如果你有任何问题，请写在这里的评论。