内嵌图像列表未与文本对齐，中断结构

Question

所以我在这里报名，因为我有些东西让我发疯。我确信答案非常简单明了，但我只能看到它......

我想为一篇文章制作一个小图库，展示来自不同视频游戏的截图。问题：列表无法与内容div中的文本正确对齐。不管我做什么。 text-align: left只是确切地知道这个位置center和right。它就像是在div的边缘对齐，但没有。将其置于所需的<p>标签内会破坏文本中所示的文本。将它保留在<p>标签之外会使文本保持原样，但列表恰好位于同一位置。我尝试了inline-block，inline，position: absolute等，但似乎没有任何效果。我已经尝试在其他div搜索问题，但我找不到任何东西。 Here is a picture

这是css：

.gallerie {
    text-align: left;
    width: 100%;
}

.gallerie ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.gallerie li {
    display: inline;
    margin: 0px;
    padding: 0px;
}

无法以某种方式在此处显示HTML部分，但它只是一个包含图片的简单ul li列表。整件事情很简单，但事情并非如此。

提前致谢！

编辑：

因为我无法正确使用代码，所以这是与该问题的页面的直接链接：Link to the Problem

我希望这是允许的。感谢管理员的编辑，我是新来的，真的不习惯。非常感谢你。

所以，简而言之：

想在这里添加图片，不能发布两个以上的链接

编辑： 有趣的是，当我把ul li放在文章标签之外时，它会起作用。所以我会有一个解决方法。

编辑：问题似乎在文章标签内。我有两个左右边距。但当我将其设置为0px边距时，整个文本向左移动（这就是为什么我的边距为20px）。我想这个问题将是第二个不必要的边际。

编辑：我通过取走边距左边来解决这个问题：20px;超出了文章标记，并将值添加到该类的p标记中。作品。我真的不知道错误是什么，但现在看起来很好。谢谢大家的帮助。

上次编辑：刷新指向站点的链接时，可以看到工作示例。谢谢你的帮助。

Answer 1

您的问题是css padding

<ul>标记具有默认填充。如果设置padding: 0;，则间距应该消失。

我会说为text-align: center;类设置padding: 0;和.gallerie

这是你想要的吗？

.gallerie

的对应css

填充示例：

.padded {
  padding: 10px;
  background: red;
}

p {
  background: yellow;
}

<div class="padded">
  <p>This is some text</p>
</div>

Answer 2

查看问题所在页面的链接。只需提供.gallerie类padding:0;和margin-left:15px;（以实现统一缩进）。

从页面中可能会尝试将<ul>打包在<p>中，这是无效的HTML。

Answer 3

尝试将padding-left: 20px添加到<ul>并将文字包含在<p>

下面