HTML 转载 作者：太空宇宙 更新时间：2023-11-04 13:22:15 25 4

Question

我有一个顶部有固定工具栏的页面，无论用户在页面上的哪个位置垂直滚动，该工具栏始终可见。该工具栏大约有 40 像素高。

我在该页面上还有一个目录，它使用 <a href="#ref>标签指向页面的特定部分。当然还有<a id="ref>用于标记这些部分所在位置的标签。

我的问题是页面上的工具栏(固定在顶部)挡住了 #ref 所在文本部分的前两行或三行链接到。有没有办法在 a 中(或之前)添加一个垫片？标记以便在行之间实际上看不到空格，但是当用户单击链接时，页面滚动得少一点并且文本没有被阻塞？

Answer 1

:target {
     display:block;
     padding-top: 20px;
}

这会将目标元素的行为更改为 block 并应用填充。请注意，如果您仅在 block 级元素 (example) 上使用 id，则不需要 display:block。

另请注意，如果您链​​接到句子中间的单词，这肯定不起作用。在这种情况下，您将不得不使用 JavaScript。