Question

我在下面的水平锚标签列表中获得了额外的空白字符。这对我来说是一个主要的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

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

以下是问题的直观示例。箭头是右上角的背景图像。

Visual example of broken/working behavior

以下是用于设置这些按钮样式的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

尝试在@：escape中使用@ Code / @ End Code块。此外，如果您为正在使用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。

您可以将float: left;添加到a.top_menu_button课程中，这样可以解决问题。或...
您可以使用外部<div id="contentPageMenu">并为其指定样式style="word-spacing: -1em"。然后，将word-spacing: 0;添加到您的a.top_menu_button课程中，这样也可以解决问题。

尝试使用Google搜索“显示内联块空白”，您将获得多次点击，讨论问题和样式解决方法。 This one和this one都对问题进行了清晰简洁的描述，并提供了一些解决方法。

VB - ASP.NET MVC 3 Razor渲染的额外空白

1 个答案: