ASP.net MVC (Razor ビュー エンジンを使用) でリスト ビューとウィジェット ビューを切り替えるオプションを作成しようとしていました。
しかし、画像を追加し、それを「正しい高さ」（隣にある画像と同じ高さ）に拡大縮小しようとすると、問題が発生します。
私は次のようなものを作成しようとしていました:
望ましい結果:
---------------------------------------------------------------------------------
[≡] List View | [+] Widget View
---------------------------------------------------------------------------------
ここで[≡]、 と は[+]実際には小さなアイコン画像でした。
これまでの試みは次のとおりです。
アクション リンクは次のようになります。
@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) 画像はテキストのほぼ2倍の大きさでした（下の図と同様）
_ _ _ _
| | | |
| icon | | icon |
|_ _| List View | |_ _| Widget View
次のように作成してみても構いません:
代替：
---------------------------------------------------------------------------------
_ _ _ _
| | | |
| icon | List View | | icon | Widget View
|_ _| |_ _|
もし私が持っていたに。
これを解決/作成する方法を知っている/アドバイスしてくれる人はいますか?
ベストアンサー1
使用できますUrl.アクションハイパーリンクとURL.コンテンツ画像ソースについて。
次に、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>