Question

我正在VS 2008中开发一个C＃/ ASP.NET Web应用程序。目前这个页面太高了。按钮显示在顶部，然后这些按钮和resultLabel文本之间有很大的间隙。以下代码来自我的ASPX文件。我已尝试切换到此文件的“设计”选项卡并手动移动此标签，但仍存在很大差距。我确信这很简单。我该如何纠正？

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataMatch.aspx.cs" Inherits="AddFileToSQL.DataMatch" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
    </style>
    <script language="javascript" type="text/javascript">
    </script>
</head>
<body>
    <form id="Form1" method="post" runat="server">
    <table width="50%" >
        <tr>
        </tr>
        <tr align="center">
            <td align="center" valign="top">
                <asp:placeholder runat="server" id="phTextBoxes"></asp:placeholder>
            </td>
             <td colspan="2">
                <asp:Label ID="Instructions" runat="server" Font-Italic="True"  
                    Text="Now select from the dropdownlists which table columns from my database you want to map these fields to"></asp:Label>
            </td>
            <td align="center" colspan="2" >
                <asp:button id="btnSubmit" runat="server" text="Submit" width="150px" style="top:auto; left:auto"
                    OnClick="btnSubmit_Click" top="100px"></asp:button>
                &nbsp;
                </td>
       </tr>
     <asp:panel id="pnlDisplayData" runat="server" visible="False">
        <tr>
            <td colspan="2" align="center" valign="top">
                <asp:literal id="lTextData" runat="server"></asp:literal>
            </td>
        </tr></asp:panel>
    </table> 

    <table align="center"><tr>
    <td style="text-align: center;width: 300px;">
    <asp:Label ID="resultLabel" runat="server" style="position:absolute; text-align:center;" 
        Visible="False"></asp:Label>
    </td></tr></table>    
    <p>
</p>      
    </form>
    </body>
</html>

Answer 1

原因是因为你有一些内联CSS。

删除：

 top:148px;

并且可选择：

 left: 155px;

Answer 2

缩小或删除asp：Label

中的“top”标记

<asp:Label ID="resultLabel" runat="server" style="position:absolute; text-align:center; top:148px; left: 155px;" Visible="False"></asp:Label>

Answer 3

我不确定您希望这两个表相对于彼此定位，但尝试将border =“1”添加到表标记中以查看表格和单元格的内容。

Answer 4

我不确定你想要的最终结果是什么样的，所以我不知道为什么你需要两张桌子。这对你有用吗？我在我自己的文本中添加了所有控件，以便看到它们最终会出现在屏幕上。

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head id="Head1" runat="server"> 
    <title></title> 
    <style type="text/css"> 
    </style> 
    <script language="javascript" type="text/javascript"> 
    </script> 
</head> 
<body> 
    <form id="Form1" method="post" runat="server"> 
    <table >
        <tr>
            <td> 
                <asp:placeholder runat="server" id="Placeholder1"></asp:placeholder> 
            </td> 
            <td> 
                <asp:Label ID="Label1" runat="server" Font-Italic="True"   
                    Text="Now select from the dropdownlists which table columns from my database you want to map these fields to"></asp:Label> 
            </td> 
            <td> 
                <asp:button id="Button1" runat="server" text="Submit" width="150px"></asp:button> 
            </td> 
            <td>
                <asp:Label ID="Label2" runat="server" Visible="true" Text="result"></asp:Label> 
            </td>
        </tr>
        <tr>
             <asp:panel id="Panel1" runat="server" visible="true"> 
                <td> 
                    <asp:literal id="Literal1" runat="server" Text="test of literal control"></asp:literal> 
                </td>
            </asp:panel>
        </tr>
    </table>
    </form> 
    </body> 
</html>

Answer 5

有很多事情是不对的：

您指定了不需要的colspan，因为在任何TR
在桌子内你给了asp面板。该面板应位于托管该文字控件的td内。
由于您使用的是表格，因此最好不要使用一个。位置：绝对湾指定Top

以下是更正的html：

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        </style>

    <script language="javascript" type="text/javascript">
    </script>

</head>
<body>
    <form id="Form1" method="post" runat="server">
    <table width="50%">
        <tr>
        </tr>
        <tr align="center">
            <td align="center" valign="top">
                <asp:PlaceHolder runat="server" ID="phTextBoxes"></asp:PlaceHolder>
            </td>
            <td>
                <asp:Label ID="Instructions" runat="server" Font-Italic="True" Text="Now select from the dropdownlists which table columns from my database you want to map these fields to"></asp:Label>
            </td>
            <td align="center" >
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="150px" ></asp:Button>                
            </td>
        </tr>

            <tr>
                <td colspan="3" align="center" valign="top">
                <asp:Panel ID="pnlDisplayData" runat="server" Visible="False">
                    <asp:Literal ID="lTextData" runat="server"></asp:Literal>
                </asp:Panel>
                </td>
            </tr>

    </table>
    <table align="center">
        <tr>
            <td style="text-align: center; width: 300px;">
                <asp:Label ID="resultLabel" runat="server" Style="text-align: center;"
                    Visible="False"></asp:Label>
            </td>
        </tr>
    </table>
    <p>
    </p>
    </form>
</body>
</html>

同时检查您是否正在重新定位代码中的任何项目。

HTH

如何缩小ASPX页面

5 个答案: