如何在背景链接图像上放置ul元素？

问题描述：

我想将<ul>元素放置在背景链接图像（黑色正方形）上。如何在背景链接图像上放置ul元素？

在单词“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; 
}

目前尚不清楚你在做什么。你的意思是？ - http://jsfiddle.net/hcky3gfx/2/单从'ul' – 2014-09-11 10:32:50

没有，右，并从“约”字去掉左边的宽度值再一次，我不能点击黑色方形 – 2014-09-11 10:36:01

它仍然不清楚是什么你正在努力去做。 – 2014-09-11 10:38:49

答

这里是做这件事的一种方式，而不必绝对定位每个环节。

开始使用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元素溢出容器的父边缘之外，这有点奇怪，但在这种情况下，正是需要的。在

观看演示：http://jsfiddle.net/audetwebdesign/91ea4tfw/

请注意，您可以添加上/下边距到ul.all li所得空白也将让您点击背景链接图像。在这种情况下，一定要设置width: 0到ul.all和（仅用于演示）去除黄色边框。

如何在背景链接图像上放置ul元素？

相关推荐