Css 将链接放入菜单按钮中

我正在尝试用六个按钮创建一个菜单，放置在一个大的背景图像上。如何让链接文本留在按钮内？这是到目前为止的代码（我希望继续使用这个“列表方法”，因为我发现它比两个图像中的多个div语句更容易理解……：

ul
{
填充：0px；
边际：0px；
宽度：510px；
浮动：左；
列表样式：无；
背景图片：url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg);
z指数：150；
}
ulli
{
宽度：50px；
高度：100px；
填充：20px；
浮动：左；
显示：内联块；
z指数：100；
}

链接1
链接2
链接3
链接4
链接5

您需要将文本链接包装在锚中，因为我认为您需要使它们无论如何都可以单击，然后使用负边距“上移”。大概是这样的：

<ul>
    <li>LINK1</li>
    <li>LINK2</li>
    <li>LINK3</li>
    <li>LINK4</li>
    <li>LINK5</li>
</ul>

ul li
{
    position: relative;
}

ul li img {
  position: absolute;
  z-index: -1;
}

ul
{
填充：0px；
边际：0px；
宽度：510px；
浮动：左；
列表样式：无；
背景图片：url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg);
z指数：150；
}
ulli
{
宽度：50px；
高度：100px；
填充：20px；
浮动：左；
显示：内联块；
z指数：100；
}
ullia{
显示：块；
利润上限：-64px；
}

链接1
链接2
链接3
链接4
链接5

HTML

---

jsiddle:

您可以

绝对

在

li

中轻松定位

img

，并将

li

上的

填充更改为
边距
然后使用
显示：inline flex；证明内容：中心；对齐项目：居中
将文本定位在
img


ul
{
填充：0px；
边际：0px；
宽度：510px；
浮动：左；
列表样式：无；
背景图片：url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg);
z指数：150；
}
ulli
{
宽度：50px；
高度：100px；
利润率：20px；
z指数：100；
位置：相对位置；
浮动：左；
显示：内联flex；
证明内容：中心；
对齐项目：居中；
}
ulliimg{
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：0；左侧：0；
z指数：-1；
}

链接1
链接2
链接3
链接4
链接5
您可以将图像设置为li的背景，如下所示：

<ul>
    <li>LINK1</li>
    <li>LINK2</li>
    <li>LINK3</li>
    <li>LINK4</li>
    <li>LINK5</li>
</ul>

ul li
{
    position: relative;
}

ul li img {
  position: absolute;
  z-index: -1;
}

或者您可以绝对定位图像，如下所示：

<ul>
    <li>LINK1</li>
    <li>LINK2</li>
    <li>LINK3</li>
    <li>LINK4</li>
    <li>LINK5</li>
</ul>

ul li
{
    position: relative;
}

ul li img {
  position: absolute;
  z-index: -1;
}

在这里拉小提琴：

请注意，如果您的li上有“display:inline block”，则不需要“float:left”。
哦！我只是没有意识到，您可以通过添加额外的css代码来定制img标记的行为。真的很酷！我在这方面还是新手，但我完全理解所有这些解决方案！谢谢大家!