时间戳

首页 > 解决方案 > 如何将表格内的单选按钮列表与表格的其余部分对齐

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

问题描述

我正在尝试使单选按钮列表与表格的其余部分对齐，即使您减小了浏览器窗口的大小。

<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

标签： asp.nethtml-tablewebformsalignment

解决方案

前两行有四列，第三行只有两列。因此，要么在第三行再添加两列 (TableCells)，要么将 ColumnSpan 属性设置为 3 到具有 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;
}

推荐阅读