筑巢内Html.LabelFor元素(Nesting element inside Html

2019-10-21 04:41发布

<div class="form-group col-sm-5">
    @Html.LabelFor(m => m.foo)
    <a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>

<a>元素(即glyphicon酥料饼)出现在下方的 label元素,但我想它放置在标签右侧的来代替。 有没有办法通过嵌套的方式来完成这项<a>的内部@Html.LabelFor ? 这会是很酷的东西,如:

<label for="foo"> I'm the label!
    <a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</label>

如果不是这样,我将不得不使用的定位呢?


编辑 :我结束了服用拉莫的意见,并与一些简单的滚动。

<div class="form-group col-sm-5">
    <label>
       <span> I'm a **hard-coded** LabelFor DataAnnotation! </span>
       <a data-toggle="popover" data-content="I'm a popover!" href="#">
           <span class="glyphicon glyphicon-info-sign"></span>
       </a>
    </label>
</div>

仍然有兴趣,如果有一个MVC的方式来获得Glyphicons与凝聚@Html.LabelFor ,但我的问题是在这一点上或多或少的学术。


编辑#2:我发现了一个更简单的解决方案这是一种明显的后见之明。 这种方法使用的定位(即display: inline ),以确保伴随<a><span>元件在同一行上显示。

<div class="col-sm-5 form-group">
    @Html.LabelFor(m => m.foo, new { style = "display: inline;" })
    <a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>

Answer 1:

你可以使用一个表,做这样的事情

<table>
    <tr>
        <td>@Html.LabelFor(m => m.foo)</td>
        <td><a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a></td>
    </tr>
</table>

编辑:

快速谷歌搜索给我带来了这样的结果,它使用CSS来实现自己的目标, 标签和文本框上使用CSS的同一行

编辑2:

既然你是厌倦使用表,你也许能够做这样的事。 我没有测试的代码,但我不认为它应该给你你想要的行为。

HTML:

<div>
    <div class="Label">@Html.LabelFor(m => m.foo)</div>
         <a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>

CSS:

.Label{
        display: inline-block;
    }


Answer 2:

我建议你与定位继续。 不走寻常选择在这里使用的一切什么是应该使用,因为否则你会发现在未来的代码的异常行为。



Answer 3:

尝试这个:

@{
var foo = Html.LabelFor(m => m.foo)
}

<a>@foo</a>


文章来源: Nesting element inside Html.LabelFor