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