asp.net - 如何设计它？

Question

我正在尝试使用 VS 2010 设计一个像图片中的网页。我该如何设计这个？我做了“M”，但标签“财务报告”和上传控件不在同一行。**不知道“O”。**我是 asp.net 的新手，所以请给出一些想法

    <table align="center" style="width: 1000px; margin-top: 0px; height: 100px;"> 
    <tr>
       <asp:Label ID="lblFinLabel" runat="server" Text="2.Financial Capabilities"  CssClass="label" Font-Bold="True"></asp:Label>

       <td colspan="2">
       <div style="float:left; width:250px">
       <asp:Label ID="lblFinReports" runat="server" Text="1) Financial Reports (last 2 years)" CssClass="label" Font-Bold="True" Font-Size="X-Small" ></asp:Label>
       </div>
       <div style ="float:right;width:100px">
           &nbsp;<asp:UpdatePanel ID="UpdatePanel1" runat="server">
           <ContentTemplate>
                <asp:ScriptManager ID="SM2" runat="server"> </asp:ScriptManager>
                <ajaxToolkit:AsyncFileUpload ID="AFU2" runat="server" width="450px" UploaderStyle="Modern" ClientIDMode="AutoID"
                                OnClientUploadStarted="UploadStarted"
                                OnClientUploadComplete="UploadComplete"
                                OnClientUploadError="UploadError" 
                                OnUploadedComplete="AFUCmpCertificate_UploadedComplete" 
                                OnUploadedFileError="AFUCmpCertificate_UploadedFileError"/>
               <asp:Label ID="lblFinStatus" runat="server" ForeColor="#660033"></asp:Label>
          </ContentTemplate>
         </asp:UpdatePanel>
        </div>
        <div style="clear:both"></div> 
       </td>
     </tr>
     <tr>
     <td>
        <asp:Label ID="lblturnover" runat="server" Text="2) Turn-Over" CssClass="label" Font-Bold="True" Font-Size="X-Small" ></asp:Label>
     </td>
     </tr>
     <tr>
        <td colspan="2">
            <div style="float:left; width:278px">
             &nbsp;&nbsp;
            <asp:Label ID="lblAvg5" runat="server" Text="a) Average annual Turn-Over last 5 years" CssClass="label" Font-Bold="True" Font-Size="X-Small"></asp:Label>
            &nbsp;
            </div>
         <div>
            <asp:TextBox ID="txtAvgAnnual" runat="server" MaxLength="13" CssClass="textbox"></asp:TextBox>
        </div>
      </td>
     </tr>
     <tr>
       <td>
          &nbsp;&nbsp;&nbsp;
          <asp:Label ID="lblTO" runat="server" Text="b) Turn-Over last 5 years" CssClass="label" Font-Bold="True" Font-Size="X-Small"></asp:Label>
       </td>
     </tr>
     </table>

Answer 1

您的 HTML 完全没有格式。您必须在表格中添加所有控件，最好使用样式表类而不是内联样式。

我尝试制作以下内容来展示您应该如何格式化您的 HTML 代码。

        <table class="tableCss">
        <colgroup>            
            <col style="width: 25%; white-space: nowrap;" />
            <col />
        </colgroup>
        <tr>
            <th>
                <asp:Label ID="lblFinReports" runat="server" Text="1) Financial Reports (last 2 years)"
                    CssClass="label"></asp:Label>
            </th>
            <td colspan="2">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:ScriptManager ID="SM2" runat="server">
                        </asp:ScriptManager>
                        <ajaxtoolkit:asyncfileupload id="AFU2" runat="server" width="450px" uploaderstyle="Modern"
                            clientidmode="AutoID" onclientuploadstarted="UploadStarted" onclientuploadcomplete="UploadComplete"
                            onclientuploaderror="UploadError" onuploadedcomplete="AFUCmpCertificate_UploadedComplete"
                            onuploadedfileerror="AFUCmpCertificate_UploadedFileError" />
                        <asp:Label ID="lblFinStatus" runat="server" ForeColor="#660033"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </td>
        </tr>
        <tr>
            <th>
                <asp:Label ID="lblturnover" runat="server" Text="2) Turn-Over" CssClass="label"></asp:Label>
            </th>
            <td>
            </td>
        </tr>
        <tr>
            <th>
                &nbsp;&nbsp;
                <asp:Label ID="lblAvg5" runat="server" Text="a) Average annual Turn-Over last 5 years"
                    CssClass="label"></asp:Label>
            </th>
            <td>
                <asp:TextBox ID="txtAvgAnnual" runat="server" MaxLength="13" CssClass="textbox"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <th>
                &nbsp;&nbsp;&nbsp;
                <asp:Label ID="lblTO" runat="server" Text="b) Turn-Over last 5 years" CssClass="label"></asp:Label>
            </th>
            <td>
            </td>
        </tr>
    </table>

您还需要将以下样式添加到您网站样式表的页眉中。

<style type="text/css">
        .tableCss
        {
            text-align:left;
            width: 100%; 
            height: 100%;
        }
        .tableCss th
        {
            text-align:left;
            font-size:x-small;
        }
    </style>