HTML图库列表中随机Space，如何remove/fix？

Question

有问题的网站：https://s123c.github.io/design.html

我正在尝试在 3 x 4 Portfolio Gallery 中列出元素。但是我在第一个图像和行的开头之间有空格（宽度为 3 个项目）。我试图寻找类似的主题，但我找不到任何与我的问题相似的内容，因为解决方案不匹配。

Answer 1

一个好的解决方案是使用像 Foundation 这样的框架，这样就不会发生水平滚动之类的事情，并且会帮助您为网站创建一个移动版本。 我相信一个框架会帮助你解决这个问题。

当然，只有正确使用粉底才会出现这种情况，它很容易上手。

Answer 2

Flaxbox 是一个很棒的 属性 元素布局工具。我快速浏览了该网站，如果您只是在 .css 文件的末尾添加 ul {display: flex}，您应该不会再看到该问题。

或者删除#gallery 的任何当前布局代码并添加以下内容。

.container-a4 {
  display: table;
}
.caption-style-4 {
  display: table-row;
}

.caption-style-4 li {
  display: table-cell;
}

Answer 3

您不需要使用任何东西，只需在您的样式代码中插入这一行即可。 显示 table、table-row 和 table-cell 有时会出现问题，因此最好使用带有浮动元素的列表。

.row {
    overflow: auto;
}

ul 标签有点吓人，所以最好使用 overflow 属性让 ul 列表充当块元素。

因为你是浮动的，所以你列出的元素向左，ul 元素没有得到它的高度，所以你应该使用 overflow 属性。