0

我正在使用散列引用滚动到我网站的特定部分，但它会滚动以使散列位于窗口顶部，位于我的导航栏下方。所以我哈希引用的元素的标题是隐藏的，看起来不太好。

有没有办法给出一个上边距或类似于哈希引用的东西，以便它在正确的位置加载？

我尝试在 div 中放置换行符，但由于 div 上有背景颜色，它扩展了标题上方的背景，而且看起来也很糟糕。

在此先感谢您的帮助！

html: 项目 1

<div id="item1">
    <h4>item1 title</h4>
    <p>item1 content</p> 
</div>

CSS：

:target {
  padding: 2px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;}

As you can see the issue with padding is that when the has reference is selected the above CSS is applied to it. 使用填充，此背景颜色和边框将应用于整个 div（包括填充）并且看起来很糟糕。

这个问题有什么解决办法吗？

即使我像这样在 Item 1 周围添加另一个 div：

<a href="#item1"> Item 1 </a>

<div id="item1" style="padding-top: 30px;">
<div class="I want only this div with coloured background">
    <h4>item1 title</h4>
    <p>item1 content</p> 
</div>
</div>

:target 伪元素仍然选择整个 div 并为填充背景着色。

4

3 回答 3

0

如果您只使用 HTML，则必须在要链接的元素顶部使用填充以偏移导航栏。

如果这不是一个选项，您必须使用 javascript 解决方案。我刚刚写得很快，需要 jQuery。50 将是导航栏的高度。

$('a[href^=#]').on('click', function(e){
  e.preventDefault();
  var $this = $(this), $target = $($this.attr('href'));
  $('body').animate({
    scrollTop: $target.offset().top - 50
  }, 200);
});
于 2013-07-08T00:34:40.420 回答
0

为什么不给 h4 元素添加边距？如果您链接到的每个 div 都以 h4 标题开头，则执行类似的操作

div h4:first-child{margin-top:20px;}
于 2013-07-08T03:51:27.370 回答
0

将标记与周围的 div 一起使用，并像这样更改 CSS：

:target > div {
  padding: 2px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
}
于 2013-07-08T03:08:58.547 回答