在 Html.LabelFor 中嵌套 <a> 元素

Question

<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> 元素（即字形弹出框）出现在 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>

如果不是，我是否必须使用定位来代替？

---

编辑：我最终接受了 Ramo 的建议，并采用了一些简单的方法。

<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 来实现你的目标Label and text box on the same line using 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>