1

目標は、「a」要素の背景画像を div#slider 要素の背景画像の上にレンダリングすることです。

まず、コードは次のとおりです。

<div id="top_bg">
    <div id="top">
        <nav>
            <ul>
                <li><a href="#">Link onegfdgdfg gd</a></li>
                <li><a href="#">Link two</a></li>
                <li><a href="#">Link three</a></li>
                <li><a href="#">Link four</a></li>
                <li><a href="#">Link five</a></li>
            </ul>
        </nav>
    </div>
</div>

<div id="slider">
</div>

jFiddle リンクには、これに対する私の試みが含まれています: http://jsfiddle.net/zorza/drBBC/11/

相対「li」内の「a」要素の絶対配置を試してみました。これにより、z-index を指定できるようになり、#slider の上に表示できるようになりました。これはほとんど機能しますが、"a" を内部に配置するには "li" の幅を一定にする必要があり、内部のテキストが一定の幅よりも広い場合に問題が発生します (最初のメニュー項目を参照)。

私が取得したいのは、内部のテキストに応じて独自の幅を設定し、「li」要素の一定の幅を取り除くための「a」要素です。そのため、メニュー項目間のギャップは均等になります。

私が思いついた 2 番目の方法は、#slider 背景を 2 つのグラフィックにスライスし、そのうちの 1 つ (矢印の高さのもの) を #top div 背景画像内に配置することでした。このように、「a」要素を絶対に配置する必要はありません。しかし、このソリューションはまったく洗練されておらず、画像を変更する必要がある場合にあらゆる種類の問題を引き起こします。

4

2 に答える 2

2 
#top-bg{
    background-image:url('yourImage.png');
}

それはうまくいきます。div#background は必要ありません。

編集これを試してください：

a:hover :after{
    width:0;
    height:0;
    content:'';
    border:10px solid transparent;
    border-top-color:#333333;
    position:absolute;
    top:100%;
    left:49%;
}

私はそれがうまくいくと思います。画像を追加したり、新しい要素を配置したり、アンカーを再配置したりせずに

于 2013-03-11T20:06:31.503 に答える
0

アイテムの幅がすべて同じサイズになるように試しましたか

li, a {
display: /*block or inline-block depending on the layout you were after*/
}

自動幅の場合は

a {
width: auto;
}
于 2015-03-07T01:53:07.163 に答える