ASP.NET 剃须刀页面菜单

Question

我正在 ASP.NET Core 中使用 Razor 页面开发一个项目，我有一个包含图片和 link 的菜单。我正在尝试使 li 的所有区域都可点击为 link。

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

<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;  
}

问题是我只能点击 link，不能点击 li 的整个区域。有什么办法可以做到这一点吗？

Answer 1

如果我对你的问题理解正确，你可以把所有你想要点击的内容放在 <a> 标签里。

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

举个例子：

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

ASP.NET 剃须刀页面菜单

ASP.NET razor pages menu

c#

menu