4

次のようなメニューを生成しようとしています。

ここに画像の説明を入力

メニューにはいくつかの項目があり、アクティブな項目の後に矢印があります。メニュー項目は、次のコードのようなタグです。

<div class="menuCenter">
     <div class="linksWrapper">
      <a href="#">Home</a>
      <a class="menuCenterLinkLeft" href="#">Plans & Pricing</a>
      <a class="menuCenterLinkLeft" href="#">Sign In</a>
      <a class="menuCenterLinkLeft active" href="#">Sign Up</a>
      <a class="menuCenterLinkLeft" href="#">Contact</a>
     </div>
</div>

私は2つのオプションを試しました.1-JavaScriptで矢印画像を絶対に配置します。ページのサイズを変更するときに問題が発生します。2- :after 疑似要素を次のように使用します。

.linksWrapper a.active:after
{
    content: url("images/arrowImg.png");
    position: relative;
    left: -40px;
    top: 30px; 
}

このアプローチの問題は、矢印の水平方向の配置でした。リンクの中央より下にあるはずですが、それを達成できませんでした。HTML5 または CSS 3 を使用できます。

何か助けはありますか？

4

3 に答える 3

9

これを試して：

.linksWrapper a.active:after {
    content: url("images/arrowImg.png");
    position: absolute;
    left: 50%;
    top: 30px;
    margin-left: - <width-of-your-image> / 2; /* negative number!*/
}

{補足: javascript で厄介な影響を与える可能性があるため、改行を入れることは避けています。

裏技はleft:50%;で半角に戻して位置を補正するのと組み合わせるmargin-left。

例を参照してください。

于 2012-04-30T22:28:25.080 に答える
2

絶対配置アプローチが機能するはずです。定義された別の div 内に矢印を配置する必要がありますposition:relative。これにより、絶対座標は body 要素に対してではなく、この親 div に対して相対的になります。

ただし、代わりにこのアプローチを使用します。

矢印を実際の a.active アイテムの背景画像の一部にします。この方法で中央に配置されbackground-position、スクリプトは必要ありません。

于 2012-04-30T22:28:21.323 に答える
-1

早速まとめてみました..

http://jsfiddle.net/8Sqwq/1/

あなたのコードがどれほど柔軟かよくわからなかったので、これが私が思いついた最高のものです。

.active のクラス名を持つ href は矢印を継承します

// フィドルを更新して、実際の動作を示しました。

于 2012-04-30T22:33:25.890 に答える