RadioButton 和列表，文本与单选不一致

Question

你好，我有这样的东西

        <asp:RadioButtonList ID="RadioButtonList1"
            RepeatColumns="2"
            RepeatDirection="Vertical"
            RepeatLayout="Table"
            TextAlign="Left"
            runat="server">
             <asp:ListItem Text="Nacional" Value="nacional" />
             <asp:ListItem Text="Departamental" Value="departamental" />
             <asp:ListItem Text="Politica" Value="politica" />
             <asp:ListItem Text="Sociales" Value="social" />
             <asp:ListItem Text="Policial" Value="policial" />
             <asp:ListItem Text="Deportes" Value="deporte" />
        </asp:RadioButtonList>

正如您所见，文字略高，看起来很奇怪，为什么会这样？

这里我添加了html

    <div class="formline">
        <table id="MainContent_RadioButtonList1">
<tr>
    <td><label for="MainContent_RadioButtonList1_0">Nacional</label><input id="MainContent_RadioButtonList1_0" type="radio" name="ctl00$MainContent$RadioButtonList1" value="nacional" /></td><td><label for="MainContent_RadioButtonList1_3">Sociales</label><input id="MainContent_RadioButtonList1_3" type="radio" name="ctl00$MainContent$RadioButtonList1" value="social" /></td>
</tr><tr>
    <td><label for="MainContent_RadioButtonList1_1">Departamental</label><input id="MainContent_RadioButtonList1_1" type="radio" name="ctl00$MainContent$RadioButtonList1" value="departamental" /></td><td><label for="MainContent_RadioButtonList1_4">Policial</label><input id="MainContent_RadioButtonList1_4" type="radio" name="ctl00$MainContent$RadioButtonList1" value="policial" /></td>
</tr><tr>
    <td><label for="MainContent_RadioButtonList1_2">Politica</label><input id="MainContent_RadioButtonList1_2" type="radio" name="ctl00$MainContent$RadioButtonList1" value="politica" /></td><td><label for="MainContent_RadioButtonList1_5">Deportes</label><input id="MainContent_RadioButtonList1_5" type="radio" name="ctl00$MainContent$RadioButtonList1" value="deporte" /></td>
</tr>

Answer 1

RadioButtonList 控件的默认行为是显示彼此相邻的文本和单选按钮，如果它们不是相邻的，则意味着在您的 Web 应用程序的某处您有一个 CSS更改默认行为的规则。

您可以在 Google Chrome 中使用 F12 检查 HTML 和 CSS 并尝试找出导致问题的样式规则：

您也可以尝试将下面的样式规则添加到您拥有 RadioButtonList 控件的页面，只需确保将其添加到 after 所有其他 CSS 参考文献：

<style type="text/css">
    table#RadioButtonList1 td
    {
        vertical-align:top;
        height:100px;
    }
</style>

RadioButton 和列表，文本与单选不一致

RadioButton and list, text not in line with radio

asp.net

radiobuttonlist

radio-button