2012-02-21 53 views
1

我爲我的網站設計了一種個人信息格式,但輸入向右而不是左移。請幫助我,並建議如果使用表或Div比較好?我正在爲度假項目製作網站。我的div格式正確對齊

<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;} 

回答

2

更換您的個人的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> 

希望這有助於....

+0

其作品4我.. 。 – 2012-02-21 09:33:31

+0

它向左浮動,但所有的文本框都是向左浮動的,並且標籤位於其正確的dats什麼概率是:( – 2012-02-21 11:20:00

+0

chec k上面提供的更新後的代碼 – Madhu 2012-02-21 11:40:22