Question

我正在使用Razor页面在ASP.NET Core中开发一个项目，并且我有一个带有图片和链接的菜单。我试图将li的所有区域都单击为链接。

这是视图标记中我的菜单的代码：

<div id="myMenu">
    <ul>
        <li>
             <img src=""/>
             <a asp-page="/Index"><h5>Index</h5></a>
        </li>

        <li>
             <img src=""/>
             <a asp-page="/Index2"><h5>Index2</h5></a>
        </li>

         <li>
             <img src=""/>
             <a asp-page="/Index3"><h5>Index3</h5></a>
        </li>
    </ul>
</div>

在CSS中，我尝试过：

#myMenu ul li a {
    display: inline-block;
    width: 100%;
}

ul {
    display: flex;
}

li {
    height: 90px;  
}

问题是我只能单击链接，而不能单击li的整个区域。有什么办法可以做到吗？

Answer 1

如果我正确理解了您的问题，则可以将希望单击的所有内容放在<a>标记内。

<a href="#">
    <img src="#"/>
    <h5>Title</h5>
</a>

这里有个例子：

https://codepen.io/fernandesdiegod/pen/VweNXPB

ASP.NET剃须刀页面菜单

1 个答案: