Question

我想将<ul>元素放在背景链接图像（黑色方块）上。

右边的单词＆＃34;关于＆＃34;和＆＃34;联系人＆＃34;，我无法点击链接图片。我需要能够在每个外面的地方点击背景链接图像链接文本。

以下是我尝试过的内容：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的位置就是尊重到其父块容器。

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

对于链接链接元素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并删除黄色边框（仅限演示）。

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

1 个答案: