C# 对齐文本框、标签和div中的按钮

我正在尝试这样做：

但我得到的是这样的：

我无法理解如何在我的html中进行更改，我想将按钮放置在正确的位置，并使用“对齐到其他文本框”下拉列表

stylesheet i wrote is like this :
<style type="text/css">
        div.label-wrapper {
            position: relative;
            min-width: 300px;
            max-width: 400px;
            height: 24px;
            display: block;
        }

            div.label-wrapper > label {
                position: absolute;
                left: 0;
                width: 100px;
                text-align: left; /* not absolutely necessary, but will be if you assign a width to the label */
                white-space: nowrap; /* Again, not totally necessary, but if you run out of space otherwise you'll get multiple lines for your label */
            }

            div.label-wrapper > input[type=text] {
                position: absolute;
                left: 115px; /* Leaves a 15px gap between end of label and start of textbox.  Increase value if you want more than 15px or decrease if you want less */
            }
            div.label-wrapper > input[type=submit] {
                position: absolute;
                left: 115px; /* Leaves a 15px gap between end of label and start of textbox.  Increase value if you want more than 15px or decrease if you want less */
            }
    </style>

我写的样式表是这样的： div.label-wrapper{ 位置：相对位置； 最小宽度：300px； 最大宽度：400px； 高度：24px； 显示：块； } div.label-wrapper>标签{ 位置：绝对位置； 左：0； 宽度：100px； 文本对齐：left；/*不是绝对必要的，但如果为标签指定宽度，则将是*/ 空白：nowrap；/*同样，也不是完全必要的，但如果空间不足，则标签将有多行*/ } div.label-wrapper>输入[类型=文本]{ 位置：绝对位置； 左：115px；/*在标签的末尾和文本框的开头之间留有15px的间隙。如果要大于15px，请增大值；如果要小于15px，请减小值*/ } div.label-wrapper>input[type=submit]{ 位置：绝对位置； 左：115px；/*在标签的末尾和文本框的开头之间留有15px的间隙。如果要大于15px，请增大值；如果要小于15px，请减小值*/ } 而html是

<div>
                        <div class='label-wrapper'>
                            <asp:Label ID="Label1" runat="server" Text="Staff ID :"></asp:Label>
                            <asp:TextBox ID="staffID" runat="server" Width="150px"></asp:TextBox>
                        </div>
                        <div class='label-wrapper'>
                                    <asp:Label ID="Label2" runat="server" Text="Name :"></asp:Label>
                                    <asp:TextBox ID="staffname" runat="server" Width="300px"></asp:TextBox>
                        </div>
                        <div class='label-wrapper'>
                                    <asp:Label ID="Label3" runat="server" Text="Surname :"></asp:Label>
                                    <asp:TextBox ID="StaffSurname" runat="server" Width="300px"></asp:TextBox>
                        </div>
                        <div class='label-wrapper'>
                                    <asp:Label ID="Label5" runat="server" Text="Email Address :"></asp:Label>
                                    <asp:TextBox ID="email" runat="server" Width="423px"></asp:TextBox>
                        </div>
                        <div class='label-wrapper'>
                                    <asp:Label ID="Label4" runat="server" Text="Research Areas of Expertise :"></asp:Label>
                                    <asp:CheckBoxList ID="ResearchAreasList" runat="server" RepeatLayout="Flow" Width="230px">
                                        <asp:ListItem>Information Systems</asp:ListItem>
                                        <asp:ListItem>User Interfaces</asp:ListItem>
                                        <asp:ListItem>Problem Solving</asp:ListItem>
                                        <asp:ListItem>3D Graphics</asp:ListItem>
                                        <asp:ListItem>Computing Education</asp:ListItem>
                                        <asp:ListItem>Mobile Computing</asp:ListItem>
                                    </asp:CheckBoxList>
                        </div>
                        <div class='label-wrapper'>
                            <p>
                                    <span class="art-button-wrapper">
                                            <span class="art-button-l"></span>
                                            <span class="art-button-r"></span>
                                            <asp:Button ID="Button1" runat="server" CssClass="art-button" Text="Save" OnClick="Button1_Click" />
                                        </span>
                                </p>
                            <p>
                                    <span class="art-button-wrapper">
                                            <span class="art-button-l"></span>
                                            <span class="art-button-r"></span>
                                            <asp:Button ID="Button2" runat="server" CssClass="art-button" Text="Cancel" />
                                        </span>
                                </p>
                        </div>
                    </div> 

信息系统
用户界面
解决问题
三维图形
计算机教育
移动计算

我认为您必须在样式表中使用

float:left

选项才能实现此功能。下面是一个小示例代码：

#labelWrapper {
    float:left;
    width:480px;
    padding:10px;
    background:#9c9;
}

#textBoxWrapper{
    float:right;
    width:230px;
    padding:10px;
    background:#99c;
}

---

在下面的链接中，您可以找到如何构建一个两栏网站的完整示例：

我认为您必须在样式表中使用

float:left

选项才能实现此功能。下面是一个小示例代码：

#labelWrapper {
    float:left;
    width:480px;
    padding:10px;
    background:#9c9;
}

#textBoxWrapper{
    float:right;
    width:230px;
    padding:10px;
    background:#99c;
}

---

在下面的链接中，您可以找到如何构建两栏式网站的完整示例：

尝试将CSS更改为类似的内容。您不需要使用绝对定位

    div.label-wrapper {
        min-width: 300px;
        max-width: 400px;
        height: 24px;
        float:left;
    }

        div.label-wrapper > label {
            width: 100px;
            text-align: left; /* not absolutely necessary, but will be if you assign a width to the label */
            white-space: nowrap; /* Again, not totally necessary, but if you run out of space otherwise you'll get multiple lines for your label */
        }

        div.label-wrapper > input[type=text] {
            left: 115px; /* Leaves a 15px gap between end of label and start of textbox.  Increase value if you want more than 15px or decrease if you want less */
        }
        div.label-wrapper > input[type=submit] {
            left: 115px; /* Leaves a 15px gap between end of label and start of textbox.  Increase value if you want more than 15px or decrease if you want less */
        }

---

尝试将CSS更改为类似这样的内容。您不需要使用绝对定位

    div.label-wrapper {
        min-width: 300px;
        max-width: 400px;
        height: 24px;
        float:left;
    }

        div.label-wrapper > label {
            width: 100px;
            text-align: left; /* not absolutely necessary, but will be if you assign a width to the label */
            white-space: nowrap; /* Again, not totally necessary, but if you run out of space otherwise you'll get multiple lines for your label */
        }

        div.label-wrapper > input[type=text] {
            left: 115px; /* Leaves a 15px gap between end of label and start of textbox.  Increase value if you want more than 15px or decrease if you want less */
        }
        div.label-wrapper > input[type=submit] {
            left: 115px; /* Leaves a 15px gap between end of label and start of textbox.  Increase value if you want more than 15px or decrease if you want less */
        }