html - 如何将 ul 元素定位在背景链接图像上？

Question

我想定位 <ul>背景链接图像(黑色方 block )上的元素。

在“ABOUT”和“CONTACTS”这两个词的右边，我无法点击链接图片。我需要能够点击背景链接图像之外的每个地方链接文本。

这是我尝试过的:Jsfiddle

HTML:

<div class="weekend">
<a href="/all">
     <img src="http://cdn.allfun.md/2014/01/23/10/52e0cd02e892f.jpg">
</a>         
<ul class="all">
    <li class="about"><a href="/about">About</a></li>
    <li class="contacts"><a href="/contacts">Contacts</a></li>
</ul>

CSS:

.all{
    position: absolute;
    width: 290px;
    top: 15px;
    left: 15px;

}

.about{
    display: block;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.contacts{
    display: block;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
}

Answer 1

这是一种无需绝对定位每个链接的方法。

从您的 HTML 开始:

<div class="weekend">
    <a href="/all">
         <img src="http://cdn.allfun.md/2014/01/23/10/52e0cd02e892f.jpg">
    </a>         
    <ul class="all">
        <li class="about"><a href="/about">About</a></li>
        <li class="contacts"><a href="/contacts">Contacts</a></li>
    </ul>
</div>

并按如下方式修改您的 CSS:

.weekend {
    position: relative;
}
.all {
    display: inline-block;
    position: absolute;
    width: 10px; /* Set to a small value, 0 will also work */
    top: 15px;
    left: 15px;
    margin: 0;
    padding: 0;
    border: 1px dashed yellow;
}
.all li {
    display: inline-block;
    font-size: 20px;
    text-transform: uppercase;   
    border: 1px dotted yellow;
}
.about{
    font-weight: 700;
}
.contacts{
    font-weight: 400;
}

首先:将position: relative设置为.weekend，这样ul.all就相对定位了到它的父 block 容器。

对于 ul.all，将边距和填充归零以重置任何不需要的空白，并且然后设置 display: inline-block 以获得收缩以适应宽度。

对于 link 链接元素，ul.all li，使用 display: inline-block 这将如果需要，您可以更好地控制填充和边距。

现在的重点是把ul.all的宽度设置成一个小的值，比如10px，(0 也有效)。这会缩小 ul.all 的边缘，使它们不再延伸超出 li 链接元素的边缘，因此您可以点击背景包含链接文本的行内框边缘之外的元素。

本质上，ul.all li 元素溢出到父元素的边缘之外ul.all 容器，这有点奇怪，但在这种情况下，正是我们所需要的。

参见演示:http://jsfiddle.net/audetwebdesign/91ea4tfw/

请注意，您可以将顶部/底部边距添加到 ul.all li 和由此产生的空白还将允许您单击背景链接图像。在这种情况下，一定要将 width: 0 设置为 ul.all 并移除黄色边框(仅供演示)。