asp.net - 您如何调整控件的大小以使它们在 asp:Table 中均匀对齐？

Question

我正在开发一个网站，并试图创建一个正确对齐的数据输入表单。使用表格结构，我期望控件正确对齐，但无济于事。我一直在使用 <asp:TableCell> 控件的 ColumnSpan 属性来使 Title 字段跨越整个表单的宽度。

Title <asp:TextBox> 的 width 属性设置为“100%”，但 First Name 和 Last Name 框具有特定大小的像素宽度。

这是我当前代码的结果：

和代码本身：

<asp:Table runat="server">
    <asp:TableRow>
        <asp:TableCell>
            First Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox ID="FirstNameTextBox" runat="server" Width="150px" />
        </asp:TableCell>
        <asp:TableCell>
            &nbsp;&nbsp;Last Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox ID="LastNameTextBox" runat="server" Width="150px" />
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell>
            Title:
        </asp:TableCell>
        <asp:TableCell ColumnSpan="3">
            <asp:TextBox ID="TitleTextBox" runat="server" Width="100%" />
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

如您所见，布局很简单。不幸的是，它似乎占用了头发太多的空间。任何关于删除标题 <asp:TextBox> 上的额外空间以便它们完美对齐的建议将不胜感激。

Answer 1

将此 css 与 100% 宽度的文本输入一起使用

box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;

Answer 2

右对齐您的姓氏文本框。这样，您的标题文本框将与名字文本框的左侧和姓氏文本框的右侧齐平。

编辑

我确信它与填充有关。我进行了快速搜索，并在这里为您找到了可能的解决方案：宽度为 100% 的 HTML 输入文本框溢出表格单元格。

我很想知道这是否能解决它。

Answer 3

解决方案：

<asp:Table runat="server">
    <asp:TableRow>
        <asp:TableCell>
            First Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell Width="150px">
            <asp:TextBox ID="FirstNameTextBox" runat="server" Width="100%" />
        </asp:TableCell>
        <asp:TableCell Width="10px" />
        <asp:TableCell>
            Last Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell Width="150px">
            <asp:TextBox ID="LastNameTextBox" runat="server" Width="100%" />
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell>
            Title:
        </asp:TableCell>
        <asp:TableCell ColumnSpan="4">
            <asp:TextBox ID="TitleTextBox" runat="server" Width="100%" />
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

我将宽度定义更改为在 <asp:TableCell> 上，并为空白区域添加了 10px 列。然后，通过将 TextBoxes 的宽度设置为 100%，它消除了空间；奇怪但简单的解决方案。