C# 剑道小工具不在partialview

所以，我正在开发一个可以可视化数据的网站。我试图用局部视图创建它。当我单击选项卡以显示饼图时，饼图显示在页面底部。我想让它显示“导航结果”。 . 当我在段落元素的边上键入blah blah时，它会留在“navResult”div中。我不确定是剑道覆盖了样式表还是什么。 编辑：此外，当单击PartialView链接且该PartialView中有H2或其他标题元素时，导航栏和标题之间会产生间隙。ex=

我要点击的查看页面是Robot

@{
    ViewBag.Title = "Robot";
}
    @(Html.Kendo().Chart()
        .Name("chart")
                .Title(title => title
                    .Text("Share of Internet Population Growth, 2007 - 2012")
                    .Position(ChartTitlePosition.Bottom))
        .Legend(legend => legend
            .Visible(false)
        )
        .ChartArea(chart => chart
            .Background("transparent")
         )
        .HtmlAttributes(new { style = "background: center no-repeat url(" + @Url.Content("~/Content/shared/world-map.png") })
        .Series(series =>
        {
            series.Pie(new dynamic[] {
                new {category="Asia",value=53.8,color="#9de219"},
                new {category="Europe",value=16.1,color="#90cc38"},
                new {category="LatinAmerica",value=11.3,color="#068c35"},
                new {category="Africa",value=9.6,color="#006634"},
                new {category="MiddleEast",value=5.2,color="#004d38"},
                new {category="NorthAmerica",value=3.6,color="#033939"}
            })
            .Labels(labels => labels
                .Template("#= category #: \n #= value#%")
                .Background("transparent")
                .Visible(true)
            )
            .StartAngle(150);
        })
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
        )
    )

这是css文件

ul{
    list-style-type:none;
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
    overflow:auto;
    background-color:#f1f1f1;
}
li{
    text-align: center;
}

li:last-child{
    border-bottom: none;
}

li a{
display:block;
color:#000;
padding: 8px 16px;
text-decoration: none;
}

li a:hover{
    background-color: #555;
    color:white;
}
body, html {
    padding: 0;
    margin: 0;
    position: relative;
    height: 100%;
}

div.page-header {
    margin: 0;
    width: 100%;
    top: 0px;
    height: 10%;
    box-sizing: border-box;
    background-color: #ffe3e2;
}

div.header-content {
}

div.Main-Content {
    width: 100%;
    height: 100%;
}

div.nav {
    height: 100%;
    width: 20%;
    float: left;
}
.KendoView
{
    vertical-align:top;
}

div.navResult {
    height: 100%;
    width: 80%;
    float: right;
    background-color: #705756;
}

---

要解决这些类型的样式问题，我建议您将控件放置在容器标记（如span或div）中，并应用所需的样式

以下是一个例子：

@{
    ViewBag.Title = "Robot";
}
<div style="vertical-align: top;">
    @(Html.Kendo().Chart()
        .Name("chart")
                .Title(title => title
                    .Text("Share of Internet Population Growth, 2007 - 2012")
                    .Position(ChartTitlePosition.Bottom))
        .Legend(legend => legend
            .Visible(false)
        )
        .ChartArea(chart => chart
            .Background("transparent")
         )
        .HtmlAttributes(new { style = "background: center no-repeat url(" + @Url.Content("~/Content/shared/world-map.png") })
        .Series(series =>
        {
            series.Pie(new dynamic[] {
                new {category="Asia",value=53.8,color="#9de219"},
                new {category="Europe",value=16.1,color="#90cc38"},
                new {category="LatinAmerica",value=11.3,color="#068c35"},
                new {category="Africa",value=9.6,color="#006634"},
                new {category="MiddleEast",value=5.2,color="#004d38"},
                new {category="NorthAmerica",value=3.6,color="#033939"}
            })
            .Labels(labels => labels
                .Template("#= category #: \n #= value#%")
                .Background("transparent")
                .Visible(true)
            )
            .StartAngle(150);
        })
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
        )
    )
</div>

@{
ViewBag.Title=“Robot”；
}
@（Html.Kendo（）.Chart（））
.名称（“图表”）
.Title（Title=>Title
.Text（“2007-2012年互联网人口增长份额”）
.位置（图表标题位置.底部））
.Legend（Legend=>Legend
.可见（假）
)
.ChartArea（图表=>chart
.背景（“透明”）
)
.HtmlAttributes（新的{style=“background:center无重复url（“+@url.Content（“~/Content/shared/world map.png”））
.系列（系列=>
{
series.Pie（新的动态[]{
新{category=“Asia”，value=53.8，color=“#9de219”}，
新{category=“Europe”，value=16.1，color=“#90cc38”}，
新{category=“拉丁美洲”，value=11.3，color=“#068c35”}，
新的{category=“Africa”，value=9.6，color=“#006634”}，
新{category=“middleast”，value=5.2，color=“#004d38”}，
新{category=“NorthAmerica”，value=3.6，color=“#033939”}
})
.标签（标签=>标签
.Template（“#=类别：\n#=值%”）
.背景（“透明”）
.可见（真实）
)
.StartAngle（150）；
})
.工具提示（工具提示=>工具提示
.可见（真实）
.Format（“{0}%”）
)
)

---

基本上，我将您的小部件放在

div

标记中，并在其上应用

float

样式。您可以使用其他样式属性，如边距。更好的解决方案是在样式表中定义一个类，并在

div

标记中使用class属性。

我在查看剑道饼图时注意到VG代码使用了导致缺陷的100%宽度。当我在元素视图中将SVG宽度更改为80%时，饼图会向上移动。但我不确定如何在代码中修复此问题

ul{
    list-style-type:none;
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
    overflow:auto;
    background-color:#f1f1f1;
}
li{
    text-align: center;
}

li:last-child{
    border-bottom: none;
}

li a{
display:block;
color:#000;
padding: 8px 16px;
text-decoration: none;
}

li a:hover{
    background-color: #555;
    color:white;
}
body, html {
    padding: 0;
    margin: 0;
    position: relative;
    height: 100%;
}

div.page-header {
    margin: 0;
    width: 100%;
    top: 0px;
    height: 10%;
    box-sizing: border-box;
    background-color: #ffe3e2;
}

div.header-content {
}

div.Main-Content {
    width: 100%;
    height: 100%;
}

div.nav {
    height: 100%;
    width: 20%;
    float: left;
}
.KendoView
{
    vertical-align:top;
}

div.navResult {
    height: 100%;
    width: 80%;
    float: right;
    background-color: #705756;
}

@{
    ViewBag.Title = "Robot";
}
<div style="vertical-align: top;">
    @(Html.Kendo().Chart()
        .Name("chart")
                .Title(title => title
                    .Text("Share of Internet Population Growth, 2007 - 2012")
                    .Position(ChartTitlePosition.Bottom))
        .Legend(legend => legend
            .Visible(false)
        )
        .ChartArea(chart => chart
            .Background("transparent")
         )
        .HtmlAttributes(new { style = "background: center no-repeat url(" + @Url.Content("~/Content/shared/world-map.png") })
        .Series(series =>
        {
            series.Pie(new dynamic[] {
                new {category="Asia",value=53.8,color="#9de219"},
                new {category="Europe",value=16.1,color="#90cc38"},
                new {category="LatinAmerica",value=11.3,color="#068c35"},
                new {category="Africa",value=9.6,color="#006634"},
                new {category="MiddleEast",value=5.2,color="#004d38"},
                new {category="NorthAmerica",value=3.6,color="#033939"}
            })
            .Labels(labels => labels
                .Template("#= category #: \n #= value#%")
                .Background("transparent")
                .Visible(true)
            )
            .StartAngle(150);
        })
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
        )
    )
</div>