2013-07-03 38 views
0

我遇到問題,其標籤和文本框未正確排列。文本框和標籤未正確對齊

這就是我想要的,但無論我怎麼努力也沒有enter image description here發生:

這裏是CSS:

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

.descriptionBox 
{ 

font-size:12px; 
padding:4px 2px; 
border:solid 1px #aacfe4; 
width:47em; 
height:100px; 
margin:2px 0 20px 10px; 
} 
.center 
{ 
text-align:center; 
padding:100px; 
} 

p, h1, form, button{border:0; margin:0; padding:0;} 
.spacer{clear:both; height:1px;} 
/* ----------- My Form ----------- */ 
.myform{ 
margin:0 auto; 
width:50em; 
padding:14px; 
} 

#stylized{ 
border:solid 2px #7fc041; 
background:#FDE16D; 
} 
#stylized h1 { 
font-size:14px; 
font-weight:bold; 
margin-bottom:8px; 
} 
#stylized p{ 
font-size:11px; 
color:#666666; 
margin-bottom:20px; 
border-bottom:solid 1px #7fc041; 
padding-bottom:10px; 
} 
#stylized label{ 
display:block; 
font-weight:bold; 
text-align:right; 
width:140px; 
float:left; 
} 
#stylized .small{ 
color:#666666; 
display:block; 
font-size:11px; 
font-weight:normal; 
text-align:right; 
width:140px; 
} 
#stylized input{ 
float:left; 
font-size:12px; 
padding:4px 2px; 
border:solid 1px #aacfe4; 
width:200px; 
margin:2px 0 20px 10px; 
} 

而ASP服務器控件/ HTML:

<div id="stylized" class="myform"> 
     <form id="form" name="form" method="post"> 
     <h1> 
      Non-Scrum Stories</h1> 
     <p> 
      <asp:RadioButtonList ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" 
       AutoPostBack="true" RepeatDirection="Horizontal"> 
       <asp:ListItem Selected="True">Add New</asp:ListItem> 
       <asp:ListItem>Update or Delete</asp:ListItem> 
      </asp:RadioButtonList> 
     </p> 
     <asp:Panel ID="newPanel" runat="server" Visible="true"> 

      <label> 
       <asp:Label ID="Label7" runat="server" Text="Catagory:"></asp:Label> 
      </label> 
      <asp:DropDownList ID="catagoryDropDown" runat="server" DataSourceID="SqlDataSource3" 
       DataTextField="Catagory" DataValueField="PK_SupportCatagory" CssClass="dropDownList"> 
      </asp:DropDownList> 
      <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:ApplicationServices %>" 
       SelectCommand="SELECT [PK_SupportCatagory], [Catagory] FROM [SupportCatagory]"> 
      </asp:SqlDataSource> 
         <label> 
       <asp:Label ID="label5" runat="server" Text="Date Completed:"></asp:Label> 
      </label> 
      <BDP:BasicDatePicker ID="dateInput" runat="server"> 
      </BDP:BasicDatePicker> 
      <label> 
       <asp:Label ID="Label2" runat="server" Text="Application:" CssClass="leftFloat"></asp:Label> 
      </label> 
      <asp:DropDownList ID="applicationDropDown" runat="server" DataSourceID="SqlDataSource2" 
       DataTextField="AppName" DataValueField="PK_Application" CssClass="dropDownList" > 
      </asp:DropDownList> 
      <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ApplicationServices %>" 
       SelectCommand="SELECT [PK_Application], [AppName] FROM [Application]"></asp:SqlDataSource> 
      <label> 
      <asp:Label ID="Label3" runat="server" Text="Incident #:"></asp:Label> 
      </label> 
      <asp:TextBox ID="incidentInput" runat="server"></asp:TextBox> 
      <label> 
      <asp:Label ID="Label6" runat="server" Text="Hours:"></asp:Label> 
      </label> 
      <asp:TextBox ID="hoursInput" runat="server"></asp:TextBox> 
      <label><asp:Label ID="Label4" runat="server" Text="Description: "></asp:Label></label> 

    <asp:TextBox ID="descriptionInput" runat="server" Rows="10" TextMode="multiline" CssClass="descriptionBox"></asp:TextBox> 

      <button type="submit"> 
       Sign-up</button> 
      <div class="spacer"> 
      </div> 
     </form> 
    </div> 
    </asp:Panel> 

我該如何獲得理想的效果?

回答

1

如果u要正確對齊,然後使用HTML表格來設計佈局。