在div中对齐文本框和标签以及按钮

Question

我正在尝试做这样的事情：

但我得到的是这样的：，

我无法理解如何对我的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>

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

Answer 1

我认为您必须使用样式表中的float:left选项才能使其正常工作。这是一个小样本代码：

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

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

在以下链接中，您可以找到有关如何构建双列网站的完整示例：see here

Answer 2

尝试将CS​​S更改为类似的内容。您不应该使用绝对定位。

    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 */
        }