你如何调整控件的大小，使它们在asp：Table中均匀对齐？

Question

我正在开发一个网站，并尝试创建一个正确对齐的数据输入表单。使用表结构我期望控件正确对齐，但无济于事。我一直在使用＆lt; asp：TableCell＆gt;的ColumnSpan属性。控制使标题字段跨越整个表单的宽度。

标题＆lt; asp：TextBox＆gt;将width属性设置为“100％”，但First和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>

正如您所看到的，布局非常简单。不幸的是，它似乎占用了太多空间。删除标题＆lt; asp：TextBox＆gt;上的额外空格的任何建议这样他们完全对齐将非常感激。

Answer 1

右对齐您的姓氏文本框。这样，您的标题文本框将与第一个名称文本框的左侧齐平，以及姓氏文本框的右侧。

修改

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

我有兴趣知道是否可以修复它。

Answer 2

<强> SOLUTION：

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

我将宽度定义更改为＆lt; asp：TableCell＆gt;并为空格添加了10px列。然后，通过将TextBoxes的宽度设置为100％，它消除了空间;奇怪但简单的解决方案。

Answer 3

将此css用于100％宽度的文本输入

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