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 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项目中是一个小问题我不能在一行上写下我的所有图像元素，因为它们中的一些依赖于条件语句和循环语句。

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

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

您可以通过将图像插入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>

ASP .NET MVC 3 + Razor View + Elements之间的空格

3 个答案: