1

目标是在 div#slider 元素的背景图像上呈现“a”元素的背景图像。

首先，这是代码：

<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 上。它几乎可以工作，但需要“li”具有恒定的宽度才能在其中定位“a”，当内部文本比恒定宽度宽时会导致不好的方式（参见第一个菜单项）。

我想要的是一个“a”元素来根据内部文本设置它自己的宽度并摆脱“li”元素的恒定宽度，因此菜单项之间的间隙将是均匀的。

我想出的第二种方法是将#slider 背景分割成两个图形，并将其中一个（具有箭头高度的那个）放在#top div background-image 中。这样，“a”元素就不需要绝对定位。但是这种解决方案一点也不优雅，当需要更改图像时会产生各种麻烦。

4

2 回答 2

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

That will work. No need for div#background.

Edit try this:

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

I think that should work. Without adding the image and without positioning new elements and repositioning the anchors

于 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 回答