0

我试图让这些单选按钮对齐，以便它们在包含的 div 中并排。我怎样才能做到这一点。

 <div class="form-field">
      @Html.Label("Gender")
      <span>Male @Html.RadioButton("gender", "Male")</span>
      <span>Female @Html.RadioButton("gender", "Female")</span>
      <span>Unkown @Html.RadioButton("gender", "Unknown")</span>
 </div>

输出应该是内联的，而不是相互堆叠。即8

4

4 回答 4

1

我在其中创建了一个 div 和一个表，这使我可以将单选按钮指示为表数据之一。以下是其示例代码，您可以尝试：

    <div>
    <table class="textfont" style="width:100%">
    <tr>
    <td>&nbsp;</td>
    <td><asp:RadioButton ID="" runat="server" Text="" AutoPostBack="True" /></td>
    <td><asp:RadioButton ID="" runat="server" Text="" AutoPostBack="True" /></td>
    </tr> 
    </table>
    </div>

告诉我是否有问题。

于 2012-09-14T13:53:23.587 回答
0

您需要将项目组合在并排的 div 中，或者添加额外的间距以对齐第二个项目。

以下链接将对您有用

在另一个下方对齐单选按钮

于 2012-09-14T13:43:34.960 回答
0

我对 C# 不太熟悉，但使用 CSS 很简单：

.form-field span { display:inline-block; margin-right:10px; }

这是我的JSFiddle 示例。

//编辑

由于我不熟悉 C#，因此我不确定您的代码最终是否会这样，但最好将单选按钮放在标签之前。在这种情况下，

     Ο男     Ο女     Ο未知

不过，正如我所说，我对 C# 还不够熟悉，但我认为我至少会为 UI 提供建议:)

于 2012-09-14T14:01:39.887 回答
0

我认为人们在这里过度复杂化了答案。如果您想要排列一系列单选按钮，只需将您的输入包装在标签元素中：

<div class="form-field">
<label><input type="radio" name="lump">Lump</label>
<label><input type="radio" name="stump">Stump</label>
<label><input type="radio" name="bump">Bump</label>
</div>

这将使单选按钮并排排列。如果您希望它们在您的 CSS 中直接上下运行，请将 display:block 添加到您的标签元素中。这适用于 IE7。这是 HTML 规范的相关部分：http: //dev.w3.org/html5/spec/single-page.html#the-label-element。

因此，对于您的代码，这应该有效：

<div class="form-field">
      @Html.Label("Gender")
      <label>Male @Html.RadioButton("gender", "Male")</label>
      <label>Female @Html.RadioButton("gender", "Female")</label>
      <label>Unkown @Html.RadioButton("gender", "Unknown")</label>
 </div>

还有小提琴：http: //jsfiddle.net/kdUAS/

于 2012-09-14T15:32:38.800 回答