Question

我正在尝试使用@Html.DisplayFor在Elements之间放置一个空格。我知道DisplayFor是一个“绑定”属性，但是在这种情况下，我无法修改。

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Id)
        </td>
        <td>
            @{
                foreach (var t in item.ProcessDataDefinitions)
                {                      
                    @Html.DisplayFor(model => t.Name )
                    @Html.Label(" : ")
                    foreach (var gg in t.Values)
                    {                          
                        @Html.DisplayFor(model => gg.Value)
                    }                       
                }
            }
        </td>
        <td>
            @Html.ActionLink("Ir", "../Process/Show", new { id = item.Id }) |
            @Html.ActionLink("Andamento", "../Process/ViewTracker", new { id = item.Id })
        </td>


    </tr>
}

因此，在第二个foreach中，我想在属性Name和Value之间创建一个小空间，我尝试使用@Html.Label(" : ")：出现，但没有给一些空间。

Answer 1

为此，您可以使用<text>元素：

@Html.DisplayFor(model => t.Name )<text>" : "</text>

我认为您也可以使用@:作为另一种选择。您可以在此处获取更多信息：Razor’s @: and <text> syntax

Answer 2

如果您希望在元素之间留一个空隙，那么应该使用CSS，例如：

<div class="model-name">
    @Html.DisplayFor(model => t.Name )
</div>

foreach (var gg in t.Values)
{     
    <div class="model-value">                     
        @Html.DisplayFor(model => gg.Value)
    </div>
}

您的CSS可能是这样的：

.model-name { 
    display: inline-block;
    margin-right: 10px;
}

.model-value { 
    display: inline-block;
}

这是一个可以演示我的观点的可运行演示（带有彩色边框以强调位置）：

.model-name { 
    border: 1px solid red;
    display: inline-block;
    margin-right: 10px;
}

.model-value { 
    border: 1px solid blue;
    display: inline-block;
}

<div class="model-name">
        ModelName
</div>

<div class="model-value">                     
    Model Value 1
</div>
<div class="model-value">                     
    Model Value 2
</div>
<div class="model-value">                     
    Model Value 3
</div>

Answer 3

它甚至可以更简单，您不需要任何额外的标签（多余的标签会使您的页面更重）：

@Html.DisplayFor(model => t.Name) :

您也可以像这样使用 ：

 @Html.DisplayFor(model => t.Name)&nbsp;:

如何在行项目之间添加空间

3 个答案: