0

http://jsbin.com/OkaC/1/edit

HTML:

<ul>
    <li>
      <a class='active' href='#'>Link</a></li>
    <li><a href='#'>Link</a></li>
</ul>

CSS:

.active {
    background:grey;
    border-radius:2px;
    padding:4px;
}

これは、私が達成しようとしているものの基本的な例です - リンク要素自体よりも大きな効果を持つ通常のリンクを強調表示します。ここではパディングを使用していますが、ページの視覚的構造の​​一貫性が損なわれています。強調表示されたリンクは、通常のリンクに対してシフトされています。
私が考えている可能な解決策：

  • すべてのリンクにパディングを追加します。
  • JS を使用して、アクティブ リンクを現在の座標での絶対配置に切り替えます。

他の解決策はありますか？

4

2 に答える 2

1

負のマージンを追加して、リンクの周りの余分なスペースを削除することもできます:

a {
    padding: 4px;
    margin: -4px;
}

他の方法は、パディングの代わりにアウトラインを追加することです:

a {
    outline: 4px solid grey;
}
于 2013-08-23T20:31:50.450 に答える