Question

我为我的网站设计了一种个人信息，但输入是向右而不是向左浮动。请帮帮我，建议如果使用表格或Divs更好？我正在为项目的度假村制作网站。

 <div id="main">
 <h1 id="availH1">Online Reservation- Select Room</h1>
  <div id="availRight">
                <div id="availStatus">
                <p >Check Availability</p>
                <p>Select Room </p>
                <p class="checkAvail">Enter Details </p>    
                <p>Review Reservation & Confirm</p>        
                </div>

 <div id="reguser">
  <table  id="regtable" width="600" border="1" cellspacing="0" cellpadding="3">
  <tr>
    <th scope="col" colspan="6" ><div align="left">Registered User Login</div></th>

  </tr>
  <tr>
    <td colspan="6">Registered users please enter information below</td>

  </tr>
  <tr>
    <th>Email id:</th>
    <td>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                                 </td>
    <th>Password</th>
    <td>
        <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
                                 </td>
    <td>
        <asp:Button ID="Button1" runat="server" Text="Button" />
                                 </td>
    <td>Forgot Password?</td>
  </tr>
</table>
 </div>



<div id="Personal">
            <h1>Personal Details</h1>
        <label class="Plabel">Title:    
         <span class="personal">Enter the Title</span>
        </label>
         <asp:DropDownList ID="cboTitle" width="200" runat="server">
             <asp:ListItem>Mr.</asp:ListItem>
             <asp:ListItem>Mrs.</asp:ListItem>
             <asp:ListItem>Miss.</asp:ListItem>
             <asp:ListItem></asp:ListItem>
         </asp:DropDownList>

        <label class="Plabel">First Name:
        <span class="personal">Enter your First Name</span>
        </label>
        <asp:TextBox ID="CtxtName" class="Ptxt" runat="server"></asp:TextBox>

        <label class="Plabel">Last Name:
        <span class="personal">Enter your last Name</span>
        </label>
        <asp:TextBox ID="txtlname" class="Ptxt" runat="server"></asp:TextBox>

        <label  class="Plabel">Address:
        <span class="personal">Enter your Residential Address</span>
        </label>
        <asp:TextBox ID="txtAdd" class="Ptxt" runat="server" TextMode="MultiLine"></asp:TextBox>

        <label  class="Plabel">City:
        <span class="personal">Enter your City</span>
        </label>
        <asp:TextBox ID="txtCity" class="Ptxt" runat="server"></asp:TextBox>

        <label  class="Plabel">Pincode:
        <span class="personal">Enter your Pincode</span>
        </label>
        <asp:TextBox ID="txtPincode" class="Ptxt" runat="server"></asp:TextBox>

        <label  class="Plabel">State:
        <span class="personal">Enter your State</span>
        </label>
        <asp:TextBox ID="txtState" class="Ptxt" runat="server"></asp:TextBox>

        <label  class="Plabel">Contact Number:
        <span class="personal">Enter your Contact Number</span>
        </label>
        <asp:TextBox ID="txtContact" class="Ptxt" runat="server"></asp:TextBox>


        <label  class="Plabel">Email Address:
        <span class="personal">Enter your Email address</span>
        </label>
        <asp:TextBox ID="txtEmail" class="Ptxt" runat="server"></asp:TextBox>

        <label  class="Plabel">Password:
        <span class="personal">Enter your Password</span>
        </label>
        <asp:TextBox ID="txtpassword" class="Ptxt" runat="server" TextMode="Password"></asp:TextBox>

    <asp:Button ID="PbtnSubmit" runat="server" Text="Submit" />

    </div>
    </div>


    </div>

的CSS -----

#reguser { width:700px; margin-bottom:10px;}
#regtable { margin:20px 0 20px 20px;}
#cboTitle { padding:5px; width:200px; margin:2px 0px 20px 10px; float:left;}

#Personal { width:400px;
               padding:15px; height:534px;
}


#Personal{border:solid 2px #b7ddf2;
                background:#FFE87C;
                margin-top:25px;
                 margin-left:200px;}

#Personal h1 {font-size:24px;
                    font-weight:bold;
                    margin-bottom:8px;}


.Plabel {display:block;
                        font-weight:bold;
                        text-align:right;
                        width:140px;
                        float:left;}

.personal {color:#666666;
                            display:block;
                            font-size:11px;
                            font-weight:normal;
                            text-align:right;
                            width:140px;}

.Ptxt {float:left;
                            font-size:12px;
                            padding:4px 2px;
                            border:solid 1px #aacfe4;
                            width:200px;
                            margin:2px 0 20px 10px;}

#PbtnSubmit{clear:both;
                        margin-left:150px;
                        width:125px;
                        height:31px;

                        text-align:center;
                        line-height:31px;
                        color:#FFFFFF;
                        font-size:11px;
                        font-weight:bold;}
.spacer {clear:both; height:1px;}

#ContactForm p, #ContactForm h1, #ContactForm form, #ContactForm ,Button{border:0; margin:0; padding:0;}

Answer 1

将您的个人css替换为以下代码

 <style type="text/css">

        #reguser
        {
            width: 700px;
            margin-bottom: 10px;

        }
        #regtable
        {
            margin: 20px 0 20px 20px;
        }
        #cboTitle
        {
            padding: 5px;
            width: 200px;
            margin: 2px 0px 20px 10px;
            float: right;
        }
        #Personal
        {
            width: 400px;
            padding: 15px;
            height: 570px;
            float: left;
            text-align: left;
            border: solid 2px #b7ddf2;
            background: #FFE87C;
            margin-top: 25px;

        }
        #Personal h1
        {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        .Plabel
        {
            display: block;
            font-weight: bold;
            text-align: right;
            width: 140px;
            float: left;
        }
        .personal
        {
            color: #666666;
            display: block;
            font-size: 11px;
            font-weight: normal;
            text-align: right;
            width: 140px;
        }
        .Ptxt
        {
            float: right;
            font-size: 12px;
            padding: 4px 2px;
            border: solid 1px #aacfe4;
            width: 200px;
            margin: 2px 0 20px 10px;
        }
        #PbtnSubmit
        {
           clear: both; 
            margin-left: 190px;
            width: 125px;
            height: 31px;
            position: relative; 
            text-align: center;
            line-height: 31px;
            color: #FFFFFF;
            font-size: 11px;
            font-weight: bold; 

        }
        .spacer
        {
            clear: both;
            height: 1px;
        }
        #ContactForm p, #ContactForm h1, #ContactForm form, #ContactForm, Button
        {
            border: 0;
            margin: 0;
            padding: 0;

        }
    </style>

希望这会有所帮助......

我的div形式正确对齐

1 个答案: