<a>嵌套內部Html.LabelFor

<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元件的下方，但我想將它放置到標籤的右側代替。有沒有辦法通過在@Html.LabelFor中嵌套<a>來實現這一點？有這樣的事情會很酷：<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>

來源

2014-10-27 alex

我建議你繼續定位。不要在這裏使用不尋常的選擇，因爲否則你將會注意到你的代碼在將來的不正常行爲。

來源

2014-10-27 18:38:28 Ramo

這是更適合作爲評論不是答案。除了告訴人們再去google一些之外，你幾乎沒有提供任何有用的信息 – urnotsam 2014-10-27 19:11:35

Ramo的建議最有幫助，因爲在MVC中似乎沒有任何方法可以獲得我要查找的*特定*行爲。 – alex 2014-12-08 20:54:46

你可以使用一個表，這樣做

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

來源

2014-10-27 18:40:04 urnotsam

這確實會產生所需的佈局，我正在尋找，儘管我對使用表來完成這一點感到有點疲憊。我希望可能有一個更乾淨的方式來做到這一點 - 可能是內置於MVC中的東西。 – alex 2014-10-28 13:28:32

@alex我提出了一個新的解決方案，它不使用表格，而只使用CSS來進行定位。我沒有測試過代碼，但我認爲這會起作用。試一試 – urnotsam 2014-10-28 14:11:12

第二個建議的解決方案不起作用，併產生與第一個不同的行爲。 ''元素被推到''元素下面。 – alex 2014-10-29 13:16:28

試試這個：

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

<a>@foo</a>

來源

2014-10-27 18:40:48

我認爲這會讓整個標籤在懸停時切換popover，而不僅僅是glyphicon。 – alex 2014-10-27 18:55:13

<a>嵌套內部Html.LabelFor

回答

相關問題