ASP.NET控件无法正确对齐

时间:2011-07-26 23:07:30

标签: asp.net css controls panel alignment

- 在IE8.0.7600.16385中发生

- Chrome中不会出现

我有格式化问题。一整天都在撞着桌子。对于我的生活,我无法弄清楚为什么我的重置和搜索按钮没有对齐(搜索按钮被抬起,重置按钮被降低)。当我从调试运行时似乎工作得很好,但是一旦我发布它们就像政治家一样歪曲。这是图像:

enter image description here

这是渲染的代码:

        <table width="100%" border="0" cellpadding="0" cellspacing="5">
        <tr>
           <td class="cssPanelWidth">
               Search String:&nbsp;&nbsp;<div id="UpdatePanel1">

               <div id="Panel1" class="cssPanelWidth" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'lbSearch')">
    <input name="txtSearch" type="text" id="txtSearch" />&nbsp;<a onclick="javascript:Search();" id="lbSearch" href="javascript:__doPostBack('lbSearch','')" style="display:inline-block;width:75px;text-decoration:none;height:16px;font-size:Small;font-family:Tahoma;color:White;border-style:Solid;border-color:#20548E;background-color:#20548E;"><center>Search</center></a>
</div>
</div>

           </td><td class="cssBottomLeftAlign">
               <div id="TestIt"><a id="lbResetReasons" href="javascript:__doPostBack('lbResetReasons','')" style="display:inline-block;width:75px;text-decoration:none;height:16px;font-size:Small;font-family:Tahoma;color:White;border-style:Solid;border-color:#20548E;background-color:#20548E;"><center>Reset</center></a></div>

           </td><td class="cssBottomRightAlign">
               <div id="UpdatePanel2">

               <a onclick="javascript:SendSelectedItems();" id="lbSelect" href="javascript:__doPostBack('lbSelect','')" style="display:inline-block;width:75px;text-decoration:none;height:16px;font-size:Small;font-family:Tahoma;color:White;border-style:Solid;border-color:#20548E;background-color:#20548E;"><center>Select</center></a>
               <a onclick="javascript:CloseMe();" id="lbCancel" href="javascript:__doPostBack('lbCancel','')" style="display:inline-block;width:75px;text-decoration:none;height:16px;font-size:Small;font-family:Tahoma;color:White;border-style:Solid;border-color:#20548E;background-color:#20548E;"><center>Cancel</center></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
           </td>
        </tr>
        </table>

和css的东西(以防万一):

<style type="text/css"> 

    .cssBottomRightAlign
    {
        text-align: right;
        vertical-align: bottom;
    }
    .cssBottomLeftAlign
    {
        text-align: left;
        vertical-align: bottom;
    }
    .cssPanelWidth
    {
        width: 240px;   
        vertical-align: bottom;
    }

</style>

我做错了什么?!?!非常感谢任何帮助!!!

谢谢, 杰森

编辑:aspx代码以防万一 -

        <table width="100%" border="0" cellpadding="0" cellspacing="5">
        <tr>
           <td class="cssPanelWidth">
               Search String:&nbsp;&nbsp;<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>            
               <asp:Panel ID="Panel1" class="cssPanelWidth" DefaultButton="lbSearch" runat="server"><asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>&nbsp;<asp:LinkButton ID="lbSearch" BorderStyle="Solid" Font-Underline="False" Font-Size="Small" Font-Names="Tahoma" BackColor="#20548E" ForeColor="White" Height="16px" Width="75px" BorderColor="#20548E" runat="server"><center>Search</center></asp:LinkButton></asp:Panel></ContentTemplate></asp:UpdatePanel>

           </td><td class="cssBottomLeftAlign">
               <div id="TestIt"><asp:LinkButton ID="lbResetReasons" BorderStyle="Solid" Font-Underline="False" Font-Size="Small" Font-Names="Tahoma" BackColor="#20548E" ForeColor="White" Height="16px" Width="75px" BorderColor="#20548E" runat="server"><center>Reset</center></asp:LinkButton></div>

           </td><td class="cssBottomRightAlign">
               <asp:UpdatePanel ID="UpdatePanel2" runat="server"><ContentTemplate>
               <asp:LinkButton ID="lbSelect" BorderStyle="Solid" Font-Underline="False" Font-Size="Small" Font-Names="Tahoma" BackColor="#20548E" ForeColor="White" Height="16px" Width="75px" BorderColor="#20548E" runat="server"><center>Select</center></asp:LinkButton>
               <asp:LinkButton ID="lbCancel" BorderStyle="Solid" Font-Underline="False" Font-Size="Small" Font-Names="Tahoma" BackColor="#20548E" ForeColor="White" Height="16px" Width="75px" BorderColor="#20548E" runat="server"><center>Cancel</center></asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ContentTemplate></asp:UpdatePanel>
           </td>
        </tr>
        </table>

1 个答案:

答案 0 :(得分:0)

如果您使用的是Chrome,请右键点击违规按钮和“检查元素”。它会告诉你有助于元素风格的所有内容,希望答案会突然出现在你面前。其他浏览器也有类似的功能。