嵌套＆LT; A＆GT;里面Html.LabelFor元素 [英] Nesting <a> element inside Html.LabelFor

问题描述

 ＆LT; D​​IV CLASS =表单组COL-SM-5＆GT;
    @ Html.LabelFor（M = GT; m.foo）
    ＆LT;一个数据切换=酥料饼数据内容=我是酥料饼！ HREF =＃＆GT; ＆LT;跨度类=glyphicon glyphicon-信息符号＆GT;＆LT; / SPAN＆GT;＆LT; / A＆GT;
＆LT; / DIV＆GT;
 

的＆LT; A＆GT; （即glyphicon酥料饼）出现元素的下的的标签元素，但我想将它放置在标签的右键的一面，而不是。有没有办法通过嵌套＆LT的方式来做到这一点; A＆GT; 里面的 @ Html.LabelFor ？这将会是很酷的是这样的：

 ＆LT;标签=foo的＆GT;我的标签！
    ＆LT;一个数据切换=酥料饼数据内容=我是酥料饼！ HREF =＃＆GT; ＆LT;跨度类=glyphicon glyphicon-信息符号＆GT;＆LT; / SPAN＆GT;＆LT; / A＆GT;
＆LT; /标签＆gt;
 

如果不是这样，我将不得不使用的定位呢？

---

修改：我结束了服用拉莫的意见，并与一些简单的滚动。

 ＆LT; D​​IV CLASS =表单组COL-SM-5＆GT;
    ＆LT;标签＆gt;
       ＆LT;跨度＆GT;我是**硬codeD ** LabelFor DataAnnotation！ ＆LT; / SPAN＆GT;
       ＆LT;一个数据切换=酥料饼数据内容=我是酥料饼！ HREF =＃＆GT;
           ＆LT;跨度类=glyphicon glyphicon-信息符号＆GT;＆LT; / SPAN＆GT;
       ＆所述; / A＆GT;
    ＆LT; /标签＆gt;
＆LT; / DIV＆GT;
 

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

---

编辑＃2 ：我发现了一个更容易的解决方案这是一种明显的在事后。这种方法使用定位（即显示：内联）以确保伴随＆LT; A＆GT; 和＆LT;跨度方式＆gt; 元素显示在同一行

 ＆LT; D​​IV CLASS =COL-SM-5形式组＆GT;
    @ Html.LabelFor（M = GT; m.foo，新{风格=显示：内联;}）
    ＆LT;一个数据切换=酥料饼数据内容=我是酥料饼！ HREF =＃＆GT; ＆LT;跨度类=glyphicon glyphicon-信息符号＆GT;＆LT; / SPAN＆GT;＆LT; / A＆GT;
＆LT; / DIV＆GT;
 

解决方案

您可以使用一个表，做这样的事情。

 ＆LT;表＆gt;
    ＆所述; TR＆GT;
        ＆LT; TD＆GT; @ Html.LabelFor（M = GT; m.foo）LT; / TD＆GT;
        ＆LT; TD＆GT;＆LT;数据拨动=酥料饼数据内容=我是酥料饼！ HREF =＃＆GT; ＆LT;跨度类=glyphicon glyphicon-信息符号＆GT;＆LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; /表＆gt;
 

编辑：

一个快速谷歌搜索给我带来了这样的结果，它使用CSS来实现自己的目标，<一个href=\"http://stackoverflow.com/questions/6437621/label-and-text-box-on-the-same-line-using-css\">Label并使用CSS 同一行文本框

编辑2：

既然你是厌倦使用表格，你可能能够做这样的事情。我还没有测试code，但我相信它应该给你你想要的行为。

HTML：

 ＆LT; D​​IV＆GT;
    ＆LT; D​​IV CLASS =标签＆GT; @ Html.LabelFor（M = GT; m.foo）LT; / DIV＆GT;
         ＆LT;一个数据切换=酥料饼数据内容=我是酥料饼！ HREF =＃＆GT; ＆LT;跨度类=glyphicon glyphicon-信息符号＆GT;＆LT; / SPAN＆GT;＆LT; / A＆GT;
＆LT; / DIV＆GT;
 

CSS：

  .Label {
        显示：inline-block的;
    }
 

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

The <a> element (i.e. the glyphicon popover) appears beneath the label element, but I'd like to have it placed to the right side of the label instead. Is there a way to accomplish this by way of nesting the <a> inside of the @Html.LabelFor? It'd be cool to have something like:

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

If not, will I have to use positioning instead?

---

EDIT: I ended up taking Ramo's advice and rolling with something simple.

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

Still interested if there's an MVC way to get Glyphicons to cohere with @Html.LabelFor, but my question is more or less academic at this point.

---

EDIT #2: I found an even easier solution which is kind of obvious in hindsight. This approach uses positioning (i.e. display: inline) to ensure that the accompanying <a> and <span> elements display on the same line.

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

解决方案

You could use a table and do something like this

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

EDIT:

A quick google search brought me to this result which uses CSS to accomplish your goal Label and text box on the same line using css

EDIT 2:

Since you are weary of using tables you might be able to do something like this. I have not tested the code yet, but I do believe it should give you your desired behavior.

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;
    }

这篇关于嵌套＆LT; A＆GT;里面Html.LabelFor元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！