0

我试图得到这个：

在此处输入图像描述

但我得到了这个：

在此处输入图像描述

我的 _Layout.cshtml：

<!DOCTYPE html>
<html>
<head> 
    <title>@ViewBag.Title</title> 
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
    <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" 
type="text/javascript"></script> 
</head>
<body>
 <div id="header"> 
        <div class="title">SPORTS STORE</div> 
     </div> 
     <div id="categories"> 
         @{Html.RenderAction("Menu", "Nav");} 
     </div> 
     <div id="content"> 
        @RenderBody() 
    </div>
</body>
</html>

我的 Menu.cshtml：

@model IEnumerable<string> 

@{ 
    Layout = null; 
} 

@Html.ActionLink("Home", "List", "Product") 

@foreach (var link in Model)
{ 
    @Html.RouteLink(link, new
                          {
                              controller = "Product",
                              action = "List",
                              category = link,
                              page = 1
                          }) 
}

我的网站.css：

BODY { font-family: Cambria, Georgia, "Times New Roman"; margin: 0; }
DIV#header DIV.title, DIV.item H3, DIV.item H4, DIV.pager A {
    font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;
}
DIV#header { background-color: #444; border-bottom: 2px solid #111; color: White; }
DIV#header DIV.title { font-size: 2em; padding: .6em; }
DIV#content { border-left: 2px solid gray; margin-left: 9em; padding: 1em; }
DIV#categories { float: left; width: 8em; padding: .3em; }

DIV.item { border-top: 1px dotted gray; padding-top: .7em; margin-bottom: .7em; }
DIV.item:first-child { border-top:none; padding-top: 0; }
DIV.item H3 { font-size: 1.3em; margin: 0 0 .25em 0; }
DIV.item H4 { font-size: 1.1em; margin:.4em 0 0 0; }

DIV.pager { text-align:right; border-top: 2px solid silver;
    padding: .5em 0 0 0; margin-top: 1em; }
DIV.pager A { font-size: 1.1em; color: #666; text-decoration: none;
      padding: 0 .4em 0 .4em; }
DIV.pager A:hover { background-color: Silver; }
DIV.pager A.selected { background-color: #353535; color: White; }

DIV#categories A  
{
    font: bold 1.1em "Arial Narrow","Franklin Gothic Medium",Arial; display: block;
    text-decoration: none; padding: .6em; color: Black;
    border-bottom: 1px solid silver;
}
DIV#categories A.selected { background-color: #666; color: White; }
DIV#categories A:hover { background-color: #CCC; }
DIV#categories A.selected:hover { background-color: #666; }
4

1 回答 1

0

此示例来自 ASP.NET MVC 3 PRO 书籍。我已经尝试过了，这对我有用。我建议您参考代码下载或检查您的代码是否正确。

从您在代码中的内容来看，它似乎是正确的，但您可能需要刷新缓存或使用 Firebug 等开发人员工具检查正在呈现的内容。

这是div id=categories在Firebug中的内容

DIV#categories {
    float: left;
    padding: 0.3em;
    width: 8em;
}

和里面的标签。

DIV#categories A {
    border-bottom: 1px solid silver;
    color: Black;
    display: block;
    font: bold 1.1em "Arial Narrow","Franklin Gothic Medium",Arial;
    padding: 0.6em;
    text-decoration: none;
}
于 2012-06-30T21:25:37.177 回答