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>元素（即glyphicon popover） 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>

嵌套<a> element inside Html.LabelFor</a>

3 个答案: