ASP .NET MVC3+ Razor视图+元素间空格

Question

考虑下面的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 Explorer8或Mozilla Firefox9.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 Explorer8或Mozilla Firefox9.0.1中加载VIEW-1时，两个“黑色正方形”图像没有空格分隔。

VIEW-1和VIEW-2是示例视图。

在我的一个ASPMVC3项目中，“分离图像”的事实是一个小问题。

我不能在一行中编写所有的图像元素，因为它们中的一些依赖于条件语句和循环语句。

有没有一种方法可以得到不用空格分隔的图像元素，即使它们不是写在同一行上？

Answer 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;
}

​

Answer 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" />

..。不过，每当我这样做的时候，我都会在旁边添加一条道歉的评论，解释我为什么要这样做。

Answer 3

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

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

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