Question

我正在尝试将这些单选按钮对齐，以便它们在包含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>

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

Answer 1

我已经创建了一个div和一个表witrh，这允许我将单选按钮指示为表数据之一。下面是示例代码，您可以尝试：

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

告诉我是否有问题。

Answer 2

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

以下链接对您有用

align radio button one below the other

Answer 3

我对C＃并不熟悉，但使用CSS非常简单：

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

这是我的JSFiddle example。

<强> //修改

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

Ο男Ο女Ο未知

正如我所说的那样，我对C＃的了解并不够熟悉，但我认为我至少会提供我对UI的建议：）

Answer 4

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

<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添加显示中直接上下运行：阻止您的标签元素。这适用于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/

如何在html表单上对齐单选按钮？

4 个答案: