使用css絕對位置設計asp.net窗體

Question

我正在使用表格來設計我的web應用程序的窗體。 但是，隨着控件數量的增加，它使我的標記變得混亂。 我可以使用內聯CSS（絕對位置，頂部，左指定）進行表單設計嗎？ 這會對性能產生影響嗎？有沒有任何工具或技術來輕鬆設計表單？ 以下是目前的標記。

<div style="position:relative; height: 280px;width: 910px;" class="employee-second-tab"> 
      <asp:Label ID="Label10" runat="server" style="position:absolute; top: 31px; left: 35px;" >Date of Birth:</asp:Label> 
      <div style="position:absolute; top: 30px; left: 123px;"> 
       <asp:TextBox ID="dateOfBirth" runat="server" CssClass="datepicker" Width="155px"></asp:TextBox> 
      </div> 
      <asp:Label ID="Label11" runat="server" style="position:absolute; top: 61px; left: 28px;" Text="Marital Status:"></asp:Label> 
      <asp:DropDownList ID="maritalStatus" runat="server" style="position:absolute; top: 60px; left: 123px;" Width="180px"> 
       <asp:ListItem Value="-1">--SELECT--</asp:ListItem> 
       <asp:ListItem>Single</asp:ListItem> 
       <asp:ListItem>Divorced</asp:ListItem> 
       <asp:ListItem>Married</asp:ListItem> 
       <asp:ListItem>Widow(er)</asp:ListItem> 
      </asp:DropDownList> 

      <asp:Label ID="Label12" runat="server" style="position:absolute; top: 91px; left: 65px;" Text="Gender:"></asp:Label> 
      <asp:RadioButton ID="genderMale" runat="server" Checked="True" 
      GroupName="gender" style="position:absolute; top: 90px; left: 123px;" 
      Text="Male" /> 
      <asp:RadioButton ID="genderFemale" runat="server" GroupName="gender" style="position:absolute; top: 90px; left: 210px;" Text="Female" /> 

     <asp:Label ID="Label13" runat="server" style="position:absolute; top: 121px; left: 60px;" Text="Children:"></asp:Label> 
     <asp:TextBox ID="children" runat="server" style="position:absolute; top: 120px; left: 123px;" Width="180px"></asp:TextBox> 

     <asp:Label ID="Label14" runat="server" style="position:absolute; top: 151px; left: 33px;" Text="Home Phone:"></asp:Label> 
     <asp:TextBox ID="homePhone" runat="server" style="position:absolute; top: 150px; left: 123px;" Width="180px"></asp:TextBox> 
     <asp:Label ID="Label15" runat="server" style="position:absolute; top: 181px; left: 67px;" Text="Mobile:"></asp:Label> 
     <asp:TextBox ID="mobile1" runat="server" style="position:absolute; top: 180px; left: 123px;" 
      Width="180px"></asp:TextBox> 
     <asp:TextBox ID="mobile2" runat="server" style="position:absolute; top: 210px; left: 123px;" Width="180px"></asp:TextBox> 
     <asp:Label ID="Label16" runat="server" style="position:absolute; top: 241px; left: 77px;" Text="Email:"></asp:Label> 
     <asp:TextBox ID="email" runat="server" style="position:absolute; top: 240px; left: 123px;" Width="180px"></asp:TextBox> 
     <asp:Label ID="Label17" runat="server" style="position:absolute; top: 31px; left: 397px;" Text="Address:"></asp:Label> 
     <asp:TextBox ID="address1" runat="server" style="position:absolute; top: 30px; left: 460px;" Width="180px"></asp:TextBox> 
     <asp:TextBox ID="address2" runat="server" style="position:absolute; top: 60px; left: 460px;" Width="180px"></asp:TextBox> 
     <asp:Label ID="Label18" runat="server" style="position:absolute; top: 91px; left: 424px;" Text="City:"></asp:Label> 
     <asp:TextBox ID="city" runat="server" style="position:absolute; top: 90px; left: 460px;" Width="180px"></asp:TextBox> 
     <asp:Label ID="Label19" runat="server" style="position:absolute; top: 121px; left: 403px;" Text="PO Box:"></asp:Label> 
     <asp:TextBox ID="poBox" runat="server" 
      style="position:absolute; top: 120px; left: 460px;" Width="180px"></asp:TextBox> 

     <asp:Label ID="Label20" runat="server" style="position:absolute; top: 151px; left: 416px;" Text="State:"></asp:Label> 
     <asp:TextBox ID="state" runat="server" style="position:absolute; top: 150px; left: 460px;" Width="180px"></asp:TextBox> 

     <asp:Label ID="Label21" runat="server" style="position:absolute; top: 181px; left: 393px;" Text="ZIP Code:"></asp:Label> 
     <asp:TextBox ID="zipCode" runat="server" style="position:absolute; top: 180px; left: 460px;" 
      Width="180px"></asp:TextBox> 

     <asp:Label ID="Label22" runat="server" style="position:absolute; top: 211px; left: 400px;" Text="Country:"></asp:Label> 
     <asp:DropDownList ID="country" runat="server" style="position:absolute; top: 210px; left: 460px;" Width="180px"> 
     </asp:DropDownList> 

     <asp:Label ID="Label23" runat="server" style="position:absolute; top: 241px; left: 383px;" Text="Nationality:"></asp:Label> 
     <asp:DropDownList ID="nationality" runat="server" style="position:absolute; top: 240px; left: 460px;" Width="180px"> 
     </asp:DropDownList> 
    </div> 

Answer 1

關於您的問題

我可以使用內聯CSS（絕對位置，上，左指定） 形式設計？

是的，你可以

這會不會使任何性能影響？

沒有

是否有任何工具或技術來輕鬆地設計表單？

Visual Studio完全在設計模式下完成它。

一般來說，你應該停止使用這種佈局。假設，你會被要求擺脫出生日期字段。使用當前佈局，您需要更改以下所有字段和標籤的座標以將其移動。如果您使用html表格或div，則不會發生這種情況。另一個問題是，在調整窗口大小或在小屏幕上時，絕對定位效果不佳。

沒有什麼特別在當前的形式，你可以很容易地做同樣的

<table> 
<tr>...</tr> 
</table> 

或

<div>...</div> 
<div>...</div> 

，您將可以在編碼更加靈活。