ASP .NET MVC 3周+ Razor视图+元素

之间的间隔考虑以下Razor视图 - 我们称之为视角1：ASP .NET MVC 3周+ 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" />

当我视角1加载到Internet Explorer 8或Mozilla Firefox 9.0 .1两个“黑色正方形”图像用空格分开。
但我不希望两个图像分开。

现在考虑下面的Razor视图 - 我们称之为视角2：

<h2>Index</h2> 

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

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

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

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

来源

2012-02-17 user1139666

您可以使用帮助器方法来生成img元素 – Yorgo 2012-02-17 08:31:27

以下是对Stackoverflow的相同问题，并带有一个可接受的答案：http://stackoverflow.com/questions/2628050/ignore-whitespace-in-html – Pbirkoff 2012-02-17 08:34:04

你可以尝试使用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; 
}

来源

2012-02-17 08:30:54

+1。使用CSS来微调您的图像位置。比搞乱代码容易得多。 – Graham 2013-04-02 13:15:40

-1

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

来源

2012-02-17 08:57:09

你忘了'tr'和'td'。尽管如此，仍然会有空间。 – jgauffin 2012-02-17 08:59:20

用于表示表格。为了对齐，有CSS。 – 2012-02-17 09:00:53

令人惊讶的是，剃刀让你这样做：

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

...虽然，每当我这样做，我想补充一个歉意的评论附近解释为什么我已经做到了。

来源

2013-04-02 13:07:16 teedyay

ASP .NET MVC 3周+ Razor视图+元素

回答

相关问题