HTML库列表中的随机空间，如何删除/修复？

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

您不需要使用任何东西，只需在样式代码中插入此行即可。 显示表，表格行和表格单元格有时会导致问题，因此最好使用带有浮动元素的列表。

.row {
    overflow: auto;
}

ul标签有点令人毛骨悚然，所以最好使用overflow属性使ul列表作为块元素。

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