ASP.NET razor 页面菜单

Question

我正在使用 ASP.NET 内核和 Razor 页面开发一个项目，并且我有一个包含图片和链接的菜单。 我正在尝试使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