时间戳

首页 > 解决方案 > 如何在我的幻灯片中消除点行之间的空间。我的行之间大约有 2.5 英寸。我有 120 张幻灯片，导致三排点

html - 如何在我的幻灯片中消除点行之间的空间。我的行之间大约有 2.5 英寸。我有 120 张幻灯片，导致三排点

问题描述

如何消除幻灯片中的点行之间的空间？我的行之间大约有 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 Slideshow 3.html

标签： htmlcss

解决方案

您的 CSS 包含该行margin: 100px auto;。这会在每个点的上方和下方增加 100 像素的边距。将其减小到较小的值（甚至为 0），您的点将靠近在一起。

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

在点上添加字母是一个非常不同的问题，并且不能仅在 HTML 和 CSS 中完成 - 您需要手动或在生成幻灯片的代码中完成。

推荐阅读