1使用flex的方法：

Question

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

对于代码，您可以从github仓库中看到它： “ https://github.com/nganbarova/Huddle.git”

Answer 1

要获得准确的答案，我需要先查看您的代码，但还有一些常规建议。如果您使用的是超棒的字体，则可以将其添加到样式表文件中：

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

如果您将图片用作图标，请使用以下图片：

li img { margin-right:5px }

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

Answer 2

我建议您为每个LI项目使用不同的类，然后使用:: before伪元素。然后，您可以根据需要对其进行样式设置和移动。

li {
  position: relative;
}

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

Answer 3

您尚未显示代码，因此我将为您提供通用且易于理解的缩进方法。但是，如果将代码粘贴到此处，效率会更高。

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

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

2使用网格的方法：

Grid具有一个Grid-gap规则，该规则可设置间距而不影响第一个元素：

parent_selector {
  grid-gap: 10px;
}

一起使用：not和：first-of-type伪类将使您可以缩进除第一个元素之外的所有内部元素。

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

所有这些方法都易于使用，但是如果您显示代码，则更好。如有任何疑问，请在此处写评论。