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

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