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

【问题标题】：How do you size controls so they align evenly in an asp:Table?您如何调整控件的大小以使它们在 asp:Table 中均匀对齐？
【发布时间】：2012-05-30 08:55:45
【问题描述】：

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

标题的宽度属性设置为“100%”，但名字和姓氏框具有特定大小的像素宽度。

这是我当前代码的结果：

还有代码本身：

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

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

【问题讨论】：

将它们对齐（标签）
@Aristos 不幸的是，这似乎没有任何作用。另外，使用实际的 asp 标签会改变格式，尽管几乎到了无法检测到的程度。

标签： asp.net .net

【解决方案1】：

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

编辑

我确信它与填充有关。我进行了快速搜索，并在此处为您找到了可能的解决方案：HTML input textbox with a width of 100% overflows table cells。

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

【讨论】：

不幸的是，这似乎并没有改变任何东西。使用 Google Chrome 的“检查元素”功能，我可以看到容器和文本框的大小。容器 (td) 为 391 像素宽，文本框为 394 像素。我无法解释这额外的三个像素以及为什么它的容器比控件本身小。我很抱歉，但这会让我发疯。哈！
有趣，听起来好像有一些填充或间距。将表格的CellPadding 和CellSpacing 属性设置为0，看看td 是否变为394px。
不幸的是，除了将它们压在一起之外，它什么也没做，我已经更新了主要问题中的图像以供参考。

【解决方案2】：

解决方案：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：