我试图创建一个选项来在 ASP.net MVC（带有剃刀视图引擎）中的列表视图和小部件视图之间切换。

但是，我在尝试添加图像并将其缩放到“正确的高度”（与其旁边的高度相同）时遇到了一些麻烦。

我一直在寻找创建类似的东西：

期望的结果：

-------------------------------------------------- -------------------------------------------

[≡­] List View | [+] Widget View

-------------------------------------------------- -------------------------------------------

哪里的[≡] and [+]实际上是小图标图像。

迄今为止的尝试包括：

操作链接类似于：

@Html.ActionLink("List View", "listView",  
    new { @style = "background-image:url('~/Content/Images/listIcon.png')" },null)

仅显示文本。

我还尝试创建操作链接，例如：

<img src="~/Content/Images/listIcon.png" />@Html.ActionLink("List View", "Index")

但这解决了

a) 图片不是链接的一部分；和

b）图像几乎是文本大小的两倍（类似于下图）

 _    _               _    _
|      |             |      |
| icon |             | icon |
|_    _| List View | |_    _| Widget View

我什至不介意尝试像这样创建它：

选择：

-------------------------------------------------- -------------------------------------------

 _    _               _    _
|      |             |      |
| icon | List View | | icon | Widget View
|_    _|             |_    _| 

if I had to.

有人知道/建议如何解决/创建这个吗？

您可以使用网址.操作对于超链接和网址内容为图像源。

然后您可以使用 CSS 设置外观样式。

<ul class="links">
    <li>
       <a href="@Url.Action("ListView", "Home")" title="List View" class="links">
            <img alt="List View" src="@Url.Content("~/Images/ListView.png")"> 
            List View
       </a>
    </li>
    <li>
       <a href="@Url.Action("WidgetView", "Home")" title="Widget View" class="links">
            <img alt="Widget View" src="@Url.Content("~/Images/WidgetView.png")"> 
            Widget View
       </a>
    </li>
</ul>
<style type="text/css">
    ul.links {
        list-style-type: none;
    }    
        ul.links li {
            display: inline-block;
            border-left: 1px solid black;
            padding-left: 10px;
            margin-left: 10px;
        }    
            ul.links li:first-child {
                border-left: 0;
                padding-left: 0;
                margin-left: 0;
            }
</style>