ASP .NET MVC 3 + Razor 视图 + 元素之间的空格答案

【问题标题】：ASP .NET MVC 3 + Razor View + Spaces Between ElementsASP .NET MVC 3 + Razor 视图 + 元素之间的空格
【发布时间】：2013-04-02 21:07:16
【问题描述】：

考虑以下 Razor 视图 - 我们称之为 VIEW-1：

<h2>Index</h2>

@if (true)
{
    <img src="/Content/images/black_square.png" alt="Black Square" />
}

<img src="/Content/images/black_square.png" alt="Black Square" />

当我将 VIEW-1 加载到 Internet Explorer 8 或 Mozilla Firefox 9.0.1 中时，两个“黑色方块”图像被空格隔开。
但我不希望这两个图像分开。

现在考虑以下 Razor 视图 - 我们称之为 VIEW-2：

<h2>Index</h2>

<img src="/Content/images/black_square.png" alt="Black Square" /><img src="/Content/images/black_square.png" alt="Black Square" />

当我在 Internet Explorer 8 或 Mozilla Firefox 9.0.1 中加载 VIEW-1 时，两个“黑色方块”图像没有被空格隔开。

VIEW-1 和 VIEW-2 是示例视图。
在我的一个 ASP .NET MVC 3 项目中，“分离的图像”是一个小问题。
我不能将我所有的图像元素写在一行上，因为其中一些依赖于条件语句和循环语句。

有没有办法让图像元素不被空格分隔，即使它们没有写在同一行上？

【问题讨论】：

你可以使用辅助方法来生成img元素
这是 Stackoverflow 上的相同问题，答案已被接受：stackoverflow.com/questions/2628050/ignore-whitespace-in-html

标签： asp.net-mvc-3 razor

【解决方案1】：

您可以尝试使用 CSS：

<div class="pictures">
    @if (true)
    {
        <img src="/Content/images/black_square.png" alt="Black Square" />
    }
    <img src="/Content/images/black_square.png" alt="Black Square" />
</div>

然后：

.pictures img {
    float: left;
}

【讨论】：

+1。使用 CSS 微调您的图像位置。比乱写代码要容易得多。

【解决方案2】：

令人惊讶的是，Razor 允许您这样做：

<h2>Index</h2>

@if (true)
{
    <img src="/Content/images/black_square.png" alt="Black Square" />}<img src="/Content/images/black_square.png" alt="Black Square" />

...尽管每当我这样做时，我都会在附近添加一个道歉评论，解释我为什么这样做。

【讨论】：

【解决方案3】：

您可以通过将图像插入 1 行和 1 个单元格的表格来解决此问题：

<table>
@if (true)
{
    <img src="/Content/images/black_square.png" alt="Black Square" />
}

<img src="/Content/images/black_square.png" alt="Black Square" />
</table>

【讨论】：

您忘记了tr 和td。不过还是会有空间的。
用于表示表格。为了对齐，有 CSS。