将链接放在菜单按钮内答案

【问题标题】：Putting links inside the menu buttons将链接放在菜单按钮内
【发布时间】：2017-08-14 04:27:24
【问题描述】：

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

ul
{
    padding:0px;
    margin:0px;
    width:510px;
    float:left;
    list-style:none;
    background-image: url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg);
    z-index:150;
}

ul li
{
    width:50px;
    height:100px;
    padding:20px;
    float: left;
    display:inline-block;
    z-index:100;
}

<ul>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK1</li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK2</li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK3</li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK4</li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK5</li>
</ul>

【问题讨论】：

标签： css alignment

【解决方案1】：

您需要将您的 文本链接 包装在锚点中，因为我想您无论如何都需要使它们可点击，然后使用负边距“向上移动”。像这样的：

ul
{
    padding:0px;
    margin:0px;
    width:510px;
    float:left;
    list-style:none;
    background-image: url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg);
    z-index:150;
}

ul li
{
    width:50px;
    height:100px;
    padding:20px;
    float: left;
    display:inline-block;
    z-index:100;
}

ul li a {
    display: block;
    margin-top: -64px;
}

<ul>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK1</a></li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK2</a></li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK3</a></li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK4</a></li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK5</a></li>
</ul>

【讨论】：

【解决方案2】：

HTML

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

CSS

ul
{
    padding:0px;
    margin:0px;
    width:510px;
    float:left;
    list-style:none;
    background-image: url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg);
    z-index:150;
}

ul li
{
   background-image: url(http://via.placeholder.com/350x150);
   background-size: 100% 100%;
    width:50px;
    height:100px;
    padding:20px;
    margin: 10px;
    float: left;
    display:inline-block;
    z-index:100;
}

JSFIDDLE：https://jsfiddle.net/d3Lw4hjq/

【讨论】：

【解决方案3】：

您可以absolutely 将img 定位在li 中，并将li 上的padding 更改为margin，然后使用display: inline-flex; justify-content: center; align-items: center; 将文本定位在img

ul
{
    padding:0px;
    margin:0px;
    width:510px;
    float:left;
    list-style:none;
    background-image: url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg);
    z-index:150;
}

ul li
{
    width:50px;
    height:100px;
    margin:20px;
    z-index:100;
    position: relative;
    float: left;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

ul li img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  z-index: -1;
}

<ul>
    <li><img src="http://via.placeholder.com/350x150"/>LINK1</li>
    <li><img src="http://via.placeholder.com/350x150"/>LINK2</li>
    <li><img src="http://via.placeholder.com/350x150"/>LINK3</li>
    <li><img src="http://via.placeholder.com/350x150"/>LINK4</li>
    <li><img src="http://via.placeholder.com/350x150"/>LINK5</li>
</ul>

【讨论】：

【解决方案4】：

您可以将图像设置为 li 的背景，如下所示：

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

对于 css：

li { background-image: url('http://via.placeholder.com/350x150'); }

或者你绝对定位图像，像这样：

ul li
{
    position: relative;
}

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

在这里提琴：https://jsfiddle.net/v78501mn/

请注意，如果您的 li 上有“display: inline-block”，则“float: left”不是必需的。

【讨论】：

【解决方案5】：

哦！我只是没有意识到您可以通过添加额外的 css 代码来自定义 img-tag 的行为。真的很酷！我还是新手，但我完全理解所有这些解决方案！谢谢！

【讨论】：