如何在我的幻灯片中消除点行之间的空间.我两排之间大约有2.5英寸.我有120张幻灯片，造成三排圆点

Question

如何在幻灯片中消除点行之间的空间？我两排之间大约有2.5英寸。我有120张幻灯片，造成三排圆点。

幻灯片是关于我们墓地里的退伍军人的，如果一个点代表字母表中的一个新字母，我也想在这个点的顶部或底部放一个字母。

.dot { 
cursor: pointer;  height: 15px;
width: 15px;
margin: 100px auto;
background-color: #bbb;
border-radius: 50%; line-height: 1%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}

有问题的网页是：https://www.mountbrydges.ca/Remembrance幻灯片3.html

Answer 1

您的CSS包含margin: 100px auto;行。这会在每个点的上方和下方增加100像素的边距。将其减小到一个较小的值(甚至为0(，您的点就会紧密地连接在一起。

我怀疑你添加这个空格是为了移动幻灯片下面的点，但因为你将它添加到了.dot类，所以它应用于每个点。您需要将边距应用于包含点的div，而不是点本身。

在圆点上添加字母是一个非常不同的问题，不能完全用HTML和CSS来完成——你需要手动或在生成幻灯片的代码中完成。

Answer 2

从点样式中删除margin，即

.dot {
margin: 0;
}

将margin-top添加到封装所有点的div中。

margin-top: 100px;