asp.net - 在 ActionLink 内添加 div

Question

我有一个显示信息的图 block ，但也需要是一个链接。如果用户单击图 block 上的任意位置，则需要将他们带到适当的操作。

下面是我创建的图像。

HTML

    <div class="tile">
        <div class="tile-text">Runs</div>
        <div class="tile-text details">Manage runs, routes, races, and goals</div>
        <div id="runs" class="tile-text live">You have a four mile run today</div>
    </div>

现在，如果我创建一个 ActionLink，它将创建蓝色图 block ，但我不确定如何获取 ActionLink 内的三个子 div。

我尝试过以下 ActionLink:

@Html.ActionLink("Runs", "Index", "Run", null, new { @class = "tile-text" })

这将创建以下图像:

所以基本上，我如何让图 block 链接到 Action 并且仍然拥有所有三个子 div？

Answer 1

如果需要，您可以在 onclick="window.location.href='link'" tile 上添加 <div> 属性，并使用 cursor: pointer 设置其样式，使其看起来像链接。

示例:

<div class="tile" onclick="window.location.href='link'">
    <div class="tile-text">Runs</div>
    <div class="tile-text details">Manage runs, routes, races, and goals</div>
    <div id="runs" class="tile-text live">You have a four mile run today</div>
</div>

或者，您可以将 tile <div> 设为 <a> 元素，并将其样式设置为 display: block 并包含相应的 width 和 height ，然后将其所有子元素设为 <span>与 display: block 。

示例:

<style type="text/css">
    .tile, .tile-text { display: block; }
    // You could add width and height to .tile if needed.
    // Also, if you want to put tiles next to each other, inline-block for .tile
    // would be more appropriate.
</style>

<a class="tile" href="link">
    <span class="tile-text">Runs</span>
    <span class="tile-text details">Manage runs, routes, races, and goals</span>
    <span id="runs" class="tile-text live">You have a four mile run today</span>
</a>