0

Web サイトの特定の部分にスクロールするためにハッシュ参照を使用していますが、ナビゲーション バーの下にあるウィンドウの上部にハッシュが表示されるようにスクロールします。そのため、ハッシュ参照していた要素のタイトルが隠され、見栄えがよくありません。

適切な場所に読み込まれるように、トップマージンまたはハッシュ参照に似たものを与える方法はありますか?

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;}

ご覧のとおり、パディングの問題は、has 参照が選択されている場合に上記の CSS が適用されることです。パディングを使用すると、この背景色と境界線が 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

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 に答える
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 に答える