Question

我试图使单选按钮列表与表格的其余部分对齐，即使减小浏览器窗口的大小也是如此。

<div>
    <asp:Table ID="Table1" runat="server" style="width:100%" align="center">
        <asp:TableRow runat="server" align="center">
            <asp:TableCell runat="server" align="center">1</asp:TableCell>
            <asp:TableCell runat="server" align="center">2</asp:TableCell>
            <asp:TableCell runat="server" align="center">3</asp:TableCell>
            <asp:TableCell runat="server" align="center">Result</asp:TableCell>
        </asp:TableRow>
        <asp:TableRow runat="server" align="center">
            <asp:TableCell runat="server" align="center">
                <asp:RadioButton ID="RadioButton1" runat="server" /></asp:TableCell>
            <asp:TableCell runat="server" align="center">
                <asp:RadioButton ID="RadioButton2" runat="server" /></asp:TableCell>
            <asp:TableCell runat="server" align="center">
                <asp:RadioButton ID="RadioButton3" runat="server" /></asp:TableCell>
            <asp:TableCell runat="server" align="center"></asp:TableCell>
        </asp:TableRow>
        <asp:TableRow runat="server" align="center">
            <asp:TableCell runat="server" align="center" RepeatColumns="3">
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Value="1"></asp:ListItem>
                    <asp:ListItem Value="2"></asp:ListItem>
                    <asp:ListItem Value="3"></asp:ListItem>
                </asp:RadioButtonList>
            </asp:TableCell>
            <asp:TableCell runat="server" align="center"></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
</div>

我在第二个表格行中使用了3个单选按钮，而不是一个单选按钮列表，即使浏览器窗口的大小发生了变化，它也与第一行对齐，但是第三行是我使用单选按钮列表的地方只是根本不与表格的其余部分对齐。

这里是一个打印屏幕，可帮助您更好地理解： https://i.imgur.com/VjtU1cE.png

Answer 1

前两行中有四列，第三行中只有两列。因此，将更多两列（TableCells）添加到第三行，或将设置为3的ColumnSpan属性添加到具有RadioButtonList进行补偿的单元格中。剩下的只是对齐和使用一些CSS。

如果要添加空白单元格，请为text属性添加HTML空间，以使其正确呈现。我猜想您正在使用CSS作为表格单元格/边框。

因此，如果您仅将ColumnSpan添加到所拥有的容器中：

<asp:TableRow runat="server" align="center">
    <asp:TableCell runat="server" align="center" ColumnSpan="3"
        RepeatColumns="3">
        <asp:RadioButtonList ID="RadioButtonList1" runat="server"
            RepeatDirection="Horizontal">
            <asp:ListItem Value="1"></asp:ListItem>
            <asp:ListItem Value="2"></asp:ListItem>
            <asp:ListItem Value="3"></asp:ListItem>
        </asp:RadioButtonList>
    </asp:TableCell>
    <asp:TableCell runat="server" align="center"></asp:TableCell>
</asp:TableRow>

或者，您可以在现有的单元格中再添加两个空白单元格：

<asp:TableRow runat="server" align="center">
    <asp:TableCell runat="server" align="left" CssClass="radioButtonCell"
        RepeatColumns="3">
        <asp:RadioButtonList ID="RadioButtonList1" runat="server"
            RepeatDirection="Horizontal">
            <asp:ListItem Value="1"></asp:ListItem>
            <asp:ListItem Value="2"></asp:ListItem>
            <asp:ListItem Value="3"></asp:ListItem>
        </asp:RadioButtonList>
    </asp:TableCell>
    <asp:TableCell runat="server" align="center">&nbsp;</asp:TableCell>
    <asp:TableCell runat="server" align="center">&nbsp;</asp:TableCell>
    <asp:TableCell runat="server" align="center">&nbsp;</asp:TableCell>
</asp:TableRow>

CSS：

注意，这在我创建的代码段中有效。您可能需要对此进行调整。在我的示例中，单选按钮离得太远了。

.radioButtonCell
{
    padding-left:15px;
}

如何将表格内的单选按钮列表与表格的其余部分对齐

1 个答案: