Question

<table>
        <tr>
            <td>
                <asp:Label Text="Team :" runat="server"></asp:Label></td>
            <td>
                <asp:DropDownList ID="ddlProject" OnSelectedIndexChanged="itemSelected" AutoPostBack="True" runat="server"></asp:DropDownList></td>
        </tr>
        <tr>
            <td>
                <asp:Label Text="Project :" runat="server"></asp:Label></td>
            <td>
                <asp:DropDownList ID="ddlDetails" runat="server"></asp:DropDownList></td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnBugSubmit" Text="Bug" OnClick="btnBugSubmit_Click" runat="server"/></td>
            <td>
                <asp:Button ID="btnIssueSubmit" Text="Issue" OnClick="btnIssueSubmit_Click" runat="server"/></td>
            <td >
                <asp:Button ID="btnReqSubmit" Text="Requisition" OnClick="btnReqSubmit_Click" runat="server"/></td>
        </tr>
    </table>

其中一个按钮“btnReqsubmit”（下面圈出）没有对齐，我不知道为什么。我的代码有什么问题吗？

Answer 1

这个问题正在发生，因为第二行project下拉列表的宽度更多

如果您使用的是表结构，则会出现此问题

因为列的宽度将调整为列

中单元格的最大宽度

使用div和span代替

见下面的演示

input[type="button"] {
    margin:5px;
    width:50px;
}

label {
    border:none
    width:10px;
}
select {
    width:100px;
}

<div>
        <div>
            <span>
                <label>Text</label></span>
            <span>
                <select></select></span>
        </div>
        <div>
            <span>
                <label>Text</label></span>
            <span>
                <select></select></span>
        </div>
        <div>
            <span>
                <input type="button"/></span>
            <span>
                <input type="button"/></span>
            <span>
                <input type="button"/></span>
        </div>
    </div>

Answer 2

你为前两行创建了2个单元格，最后一行创建了3个单元格，所以

将上一个tr替换为以下代码

<tr>
            <td>
                <asp:Button ID="btnBugSubmit" Text="Bug" OnClick="btnBugSubmit_Click" runat="server"/></td>
            <td>
                <asp:Button ID="btnIssueSubmit" Text="Issue" OnClick="btnIssueSubmit_Click" runat="server"/>

                <asp:Button ID="btnReqSubmit" Text="Requisition" OnClick="btnReqSubmit_Click" runat="server"/></td>
        </tr>

Answer 3

可能的解决方案。理想情况下，每行中td的数量应相同。
在您的第一个tr中，您只有2个td，而在其他行中，您有3个td。

您可以visit here查看colspan属性

<table>
        <tr>
            <td>
                <asp:Label Text="Team :" runat="server"></asp:Label>
            </td>
            <td colspan="2">
                <asp:DropDownList ID="ddlProject" OnSelectedIndexChanged="itemSelected" 
                    AutoPostBack="True" runat="server"></asp:DropDownList>
             </td>
        </tr>
        <tr>
            <td>
                <asp:Label Text="Project :" runat="server"></asp:Label>
            </td>
            <td colspan="2">
                <asp:DropDownList ID="ddlDetails" runat="server">
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnBugSubmit" Text="Bug" 
                  OnClick="btnBugSubmit_Click" runat="server"/>
            </td>
            <td>
                <asp:Button ID="btnIssueSubmit" Text="Issue" 
                OnClick="btnIssueSubmit_Click" runat="server"/>
            </td>
            <td >
                <asp:Button ID="btnReqSubmit" Text="Requisition" 
                 OnClick="btnReqSubmit_Click" runat="server"/>
            </td>
        </tr>
    </table>

表格中的asp.net按钮未对齐

3 个答案: