css - VB - ASP.NET MVC 3 Razor 呈现额外的空白

Question

我在下面的 anchor 标记水平列表中得到了额外的空白字符。这对我来说是一个主要的 CSS 样式问题。

我知道就 C# 解决方法而言，这个问题已得到解决 (asp.net mvc razor extra space)，但有人可以帮我解决 VB 解决方法吗？我没有花括号的优势来消除单行 If 条件中的所有空格。

我现在已经设法通过编写一个 HtmlHelper 扩展方法来解决这个问题，但是这个动态代码只用在一个地方(主布局页面)。在我看来，这确实应该在 .vbhtml 页面中完成。也欢迎任何反对此意见的论点。

这是错误的代码，以及已注释掉的解决方法。目标是创建一个基于站点地图的“同级”页面的水平列表，当前页面的链接和它之前的链接的样式略有不同。

@If Not (SiteMap.CurrentNode Is Nothing OrElse SiteMap.CurrentNode.ParentNode Is Nothing OrElse SiteMap.CurrentNode.ParentNode.ChildNodes.Count = 0) Then
    @<div id="contentPageMenu">
    @For Each childNode As SiteMapNode In SiteMap.CurrentNode.ParentNode.ChildNodes
        @* GENERATES AN EXTRA SPACE BETWEEN EVERY a TAG! *@
        If childNode Is SiteMap.CurrentNode Then
            @<a class="top_menu_button top_menu_button_selected" href="@childNode.Url">@Trim(childNode.Title)</a>
        ElseIf childNode.NextSibling Is SiteMap.CurrentNode Then
            @<a class="top_menu_button top_menu_button_before_selected" href="@childNode.Url">@Trim(childNode.Title)</a>
        Else
            @<a class="top_menu_button" href="@childNode.Url">@Trim(childNode.Title)</a>
        End If

        @*
        STILL GENERATES EXTRA WHITESPACE!
        If childNode Is SiteMap.CurrentNode Then @<a class="top_menu_button top_menu_button_selected" href="@childNode.Url">@Trim(childNode.Title)</a>ElseIf childNode.NextSibling Is SiteMap.CurrentNode Then @<a class="top_menu_button top_menu_button_pre_selected" href="@childNode.Url">@Trim(childNode.Title)</a>Else @<a class="top_menu_button" href="@childNode.Url">@Trim(childNode.Title)</a>End If
        *@

        @*
        CAN'T PARSE a OR If STATEMENTS!
        @<a class=@If childNode Is SiteMap.CurrentNode Then @<text>"top_menu_button top_menu_button_selected"</text> ElseIf childNode.NextSibling Is SiteMap.CurrentNode Then @<text>"top_menu_button top_menu_button_pre_selected"</text> Else @<text>"top_menu_button"</text> End If@<text> href="</text>@childNode.Url@<text>"></text>@Trim(childNode.Title)@</a>
        *@
    Next
    </div>
End If

附言- 我知道我仍然需要处理 MVC 的“规范 URL”问题，但这超出了这个问题的范围。

这是问题的可视化示例。箭头是位于右上角的背景图片。

这是用于设置这些按钮样式的 CSS:

a.top_menu_button
{
    background: url(../Images/top_menu_separator.gif) no-repeat right top #01376a;
    color: #ffffff;
    display: inline-block;
    font-family: inherit;
    font-size: 1.0em;
    font-weight: bolder;
    height: 20px;
    margin: 0;
    padding: 2px 15px 2px 10px;
    position: relative;
    text-decoration: none;
    top: 0;
    white-space: nowrap;
}

a.top_menu_button:hover
{
    font-family: inherit;
    font-style: italic;
}

a.top_menu_button_before_selected
{
    background: url(../Images/top_menu_separator_before_selected.gif) no-repeat right top #01376a;
}

a.top_menu_button_selected
{
    background: url(../Images/top_menu_separator_after_selected.gif) no-repeat right top #b9aa64;
    color: #01376a;
    font-family: inherit;
    font-style: italic;
}

Answer 1

尝试将@Code/@End 代码块与@: 转义符一起使用。此外，如果您为使用 If/Then/Else 逻辑确定的事物创建一个变量，它可能更具可读性。

@Code
If Not (SiteMap.CurrentNode Is Nothing OrElse SiteMap.CurrentNode.ParentNode Is Nothing OrElse SiteMap.CurrentNode.ParentNode.ChildNodes.Count = 0) Then
    @:<div id="contentPageMenu">
    For Each childNode As SiteMapNode In SiteMap.CurrentNode.ParentNode.ChildNodes
        Dim aClassValue As String = ""
        If childNode Is SiteMap.CurrentNode Then
            aClassValue = "top_menu_button top_menu_button_selected"
        ElseIf childNode.NextSibling Is SiteMap.CurrentNode Then
            aClassValue = "top_menu_button top_menu_button_before_selected"        
        Else
            aClassValue = "top_menu_button"
        End If
        @:<a class="@aClassValue" href="@childNode.Url">@childNode.Title.Trim()</a>
    Next
    @:</div>
End If
@End Code

顺便说一下，这是 HTML - 空格应该无关紧要。您确定这真的给您带来了问题吗？

-- 编辑--

现在我看到了您的 CSS，问题就很清楚了。您正在使用 inline-block ，这意味着空白在渲染中很重要，这就是您所发现的。您可以通过多种方式解决此问题，既可以通过 CSS，也可以不在您的 Razor 中。

1. 您可以添加 float: left;到你的a.top_menu_button类，这将解决问题。或者……
2. 你可以带上你的外衣<div id="contentPageMenu">并给它一个样式 style="word-spacing: -1em" .然后，添加 word-spacing: 0;到你的a.top_menu_button类，这也将解决问题。

尝试使用谷歌搜索“显示内联 block 空白”，您将获得多个关于问题和样式解决方法的点击。 This one和 this one两者都对问题和一些解决方法进行了清晰简洁的描述。