Question

我认为我有这段代码：

<div class=" col-md-12" style="margin: 0 auto;">
 <p>Male</p>
 @Html.RadioButtonFor(model => model.IsFemale,"false", new { htmlAttributes = new { @class = "form-control" } })
 <p>Female</p>
 @Html.RadioButtonFor(model => model.IsFemale, "true", new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.IsFemale, "", new { @class = "text-danger" })

 </div>

我想了解如何在一行中显示所有这些信息的一些提示，如下所示：

Male x Female y.

Answer 1

由于您似乎对ASP.NET MVC相对较新，并且正在使用razor语法，因此我建议您利用剃刀的语法来实现您的目标。 razor提供了一个html帮助器，用于显示： labels 。这是您使用它的方式：

<div class=" col-md-12" style="margin: 0 auto;">
@Html.LabelFor(model => model.IsFemale, "Female")
@Html.RadioButtonFor(model => model.IsFemale,"false", new { htmlAttributes = new { @class = "form-control" } })
@Html.LabelFor(model => model.IsFemale, "Male")
@Html.RadioButtonFor(model => model.IsFemale, "true", new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.IsFemale, "", new { @class = "text-danger" })
</div>

希望这有帮助!!!

Answer 2

尝试将<p>代码更改为<label>代码。 <p>标记是块元素，因此单选按钮将被推送到新行，<label>标记是内联的，因此单选按钮将保持在同一行。

<div class=" col-md-12" style="margin: 0 auto;">
 <label>Male</label>
 @Html.RadioButtonFor(model => model.IsFemale,"false", new { htmlAttributes = new { @class = "form-control" } })
 <label>Female</label>
 @Html.RadioButtonFor(model => model.IsFemale, "true", new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.IsFemale, "", new { @class = "text-danger" })
</div>

Answer 3

.col-md-12 p {display:inline;padding:0;margin:0;}

http://jsfiddle.net/wildandjam/aguUF/

连续显示单选按钮和标签

3 个答案: