1. 首页
  2. 问答
  3. CSS与ASP.NET表格控件冲突

CSS与ASP.NET表格控件冲突

2011-06-01 42 views
2

我有一些单选按钮，我在其上应用css来对齐它们。 这里是图像：CSS与ASP.NET表格控件冲突

enter image description here

这些都放置在一个表和表中的第三列中包含针对每一对单选按钮中的一个列表框或下拉列表，并且当我点击第二个单选按钮，隐藏列表框或下拉菜单出现在第三栏。

因为我已经在其上应用css来设置它的高度和宽度，所以当我单击每对中的第二个单选按钮并出现listbox时，第三列不会动态增长。查看图片：

enter image description here

我不能删除CSS因为定位将受到影响。

右侧还有另一张桌子，我也希望根据点击单选按钮来增长或缩小。但它不适合在第一个表中，因为我对css没有太多的想法，所以我将它分开，但我真的希望它能够以某种方式合并到第一个表中，而不会影响表结构。

ASPX左表的代码是：

<div class="formBroadLeftCol"> 
        <table border="1"> 
         <tr> 
          <td class="tdShortLeft"> 
           <asp:RadioButton ID="rdoAllStaff" runat="server" Text="All Staff" AutoPostBack="true" 
            Checked="true" GroupName="grpStaff" OnCheckedChanged="rdoAllStaff_CheckedChanged" /> 
          </td> 
          <td class="tdShortRight"> 
           <asp:RadioButton ID="rdoStaff" runat="server" Text="Staff" AutoPostBack="true" GroupName="grpStaff" 
            OnCheckedChanged="rdoStaff_CheckedChanged" /> 
          </td> 
          <td class="tdShortMiddle"> 
           <div id="divStaff" runat="server" visible="false" class="divListBox" style="width: 175px; 
            height: 80px;"> 
            <asp:ListBox ID="lstStaff" runat="server" SelectionMode="Multiple" Width="175px" 
             Height="81" CssClass="SingleColumnlist"></asp:ListBox> 
           </div> 
          </td> 
         </tr> 
         <tr> 
          <td class="tdShortLeft"> 
           <asp:RadioButton ID="rdoAllService" runat="server" Text="All Services" AutoPostBack="true" 
            Checked="true" GroupName="grpService" OnCheckedChanged="rdoAllService_CheckedChanged" /> 
          </td> 
          <td class="tdShortRight"> 
           <asp:RadioButton ID="rdoService" runat="server" Text="Service" AutoPostBack="true" 
            GroupName="grpService" OnCheckedChanged="rdoService_CheckedChanged" /> 
          </td> 
          <td class="tdShortMiddle"> 
           <div id="divService" runat="server" visible="false" class="divListBox" style="width: 175px; 
            height: 80px;"> 
            <asp:ListBox ID="lstService" runat="server" SelectionMode="Multiple" Width="175px" 
             Height="81" CssClass="SingleColumnlist"></asp:ListBox> 
           </div> 
          </td> 
         </tr> 
         <tr> 
          <td class="tdShortLeft"> 
           <asp:RadioButton ID="rdoAllServiceType" runat="server" Text="All Service Types" AutoPostBack="true" 
            Checked="true" GroupName="grpServiceType" OnCheckedChanged="rdoAllServiceType_CheckedChanged" /> 
          </td> 
          <td class="tdShortRight"> 
           <asp:RadioButton ID="rdoServiceType" runat="server" Text="Service Type" AutoPostBack="true" 
            GroupName="grpServiceType" OnCheckedChanged="rdoServiceType_CheckedChanged" /> 
          </td> 
          <td class="tdShortMiddle"> 
           <div id="divServiceType" runat="server" visible="false" class="divListBox" style="width: 175px; 
            height: 80px;"> 
            <asp:ListBox ID="lstServiceType" runat="server" SelectionMode="Multiple" Width="175px" 
             Height="81" CssClass="SingleColumnlist"></asp:ListBox> 
           </div> 
          </td> 
         </tr> 
         <tr> 
          <td class="tdShortLeft"> 
           <asp:RadioButton ID="rdoAllServiceStatus" runat="server" Text="All Service Statuses" 
            AutoPostBack="true" Checked="true" GroupName="grpServiceStatus" OnCheckedChanged="rdoAllServiceStatus_CheckedChanged" /> 
          </td> 
          <td class="tdShortRight"> 
           <asp:RadioButton ID="rdoServiceStatus" runat="server" Text="Service Status" AutoPostBack="true" 
            GroupName="grpServiceStatus" OnCheckedChanged="rdoServiceStatus_CheckedChanged" /> 
          </td> 
          <td class="tdShortMiddle"> 
           <div id="divServiceStatus" runat="server" visible="false" class="divListBox" style="width: 175px; 
            height: 80px;"> 
            <asp:ListBox ID="lstServiceStatus" runat="server" SelectionMode="Multiple" Width="175px" 
             Height="81" CssClass="SingleColumnlist"></asp:ListBox> 
           </div> 
          </td> 
         </tr> 
         <tr> 
          <td class="tdShortLeft"> 
           <asp:RadioButton ID="rdoAllTreatmentProvider" runat="server" Text="All Treatment Provider" 
            AutoPostBack="true" Checked="true" GroupName="grpTreatmentProvider" OnCheckedChanged="rdoAllTreatmentProvider_CheckedChanged" /> 
          </td> 
          <td class="tdShortRight"> 
           <asp:RadioButton ID="rdoTreatmentProvider" runat="server" Text="Treatment Provider" 
            AutoPostBack="true" GroupName="grpTreatmentProvider" OnCheckedChanged="rdoTreatmentProvider_CheckedChanged" /> 
          </td> 
          <td class="tdShortMiddle"> 
           <div id="divTreatmentProvider" runat="server" visible="false" class="divListBox" 
            style="width: 175px; height: 80px;"> 
            <asp:ListBox ID="lstTreatmentProvider" runat="server" SelectionMode="Multiple" Width="175px" 
             Height="81" CssClass="SingleColumnlist" DataSourceID="dtsTreatmentProviders" DataTextField="FirstName" DataValueField="ServiceId"></asp:ListBox> 
           </div> 
          </td> 
         </tr> 
         <tr> 
          <td class="tdShortLeft"> 
           <asp:RadioButton ID="rdoAllConsumerStatus" runat="server" Text="All Consumer Statuses" 
            AutoPostBack="true" Checked="true" GroupName="grpConsumerStatus" OnCheckedChanged="rdoAllConsumerStatus_CheckedChanged" /> 
          </td> 
          <td class="tdShortRight"> 
           <asp:RadioButton ID="rdoConsumerStatus" runat="server" Text="Consumer Status" AutoPostBack="true" 
            GroupName="grpConsumerStatus" OnCheckedChanged="rdoConsumerStatus_CheckedChanged" /> 
          </td> 
          <td class="tdShortMiddle"> 
           <div id="divConsumerStatus" runat="server" visible="false" class="divListBox" style="width: 175px; 
            height: 80px;"> 
            <asp:ListBox ID="lstConsumerStatus" runat="server" SelectionMode="Multiple" Width="175px" 
             Height="81" CssClass="SingleColumnlist" DataSourceID="dtsClientStatus" 
             DataTextField="Status" DataValueField="Id"></asp:ListBox> 
           </div> 
          </td> 
         </tr> 
         <tr> 
          <td class="tdShortLeft"> 
           <asp:RadioButton ID="rdoAllEhnicity" runat="server" Text="All Ehnicities" AutoPostBack="true" 
            Checked="true" GroupName="grpEhnicity" OnCheckedChanged="rdoAllEhnicity_CheckedChanged" /> 
          </td> 
          <td class="tdShortRight"> 
           <asp:RadioButton ID="rdoEhnicity" runat="server" Text="Ehnicity" AutoPostBack="true" 
            GroupName="grpEhnicity" OnCheckedChanged="rdoEhnicity_CheckedChanged" /> 
          </td> 
          <td class="tdShortMiddle"> 
           <div id="divEhnicity" runat="server" visible="false" class="divListBox" style="width: 175px; 
            height: 80px;"> 
            <asp:ListBox ID="lstEhnicity" runat="server" SelectionMode="Multiple" Width="175px" 
             Height="81" CssClass="SingleColumnlist" DataSourceID="dtsEthnicity" 
             DataTextField="LookupItem" DataValueField="Id"></asp:ListBox> 
           </div> 
          </td> 

         </tr> 
        </table>

右表的代码：

<div class="formShortRightCol"> 
         <table border="1"> 
          <tr> 
           <td> 
           <asp:CheckBoxList ID="chkStaff" runat="server" RepeatDirection="Horizontal"> 
              <asp:ListItem Text="Display" Value="Display"></asp:ListItem> 
              <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem> 
             </asp:CheckBoxList> 
             </td> 
          </tr> 
          <tr> 
           <td> 
            <asp:CheckBoxList ID="chkService" runat="server" RepeatDirection="Horizontal"> 
             <asp:ListItem Text="Display" Value="Display"></asp:ListItem> 
             <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem> 
            </asp:CheckBoxList> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <asp:CheckBoxList ID="chkServiceType" runat="server" RepeatDirection="Horizontal"> 
             <asp:ListItem Text="Display" Value="Display"></asp:ListItem> 
             <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem> 
            </asp:CheckBoxList> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <asp:CheckBoxList ID="chkServiceStatus" runat="server" RepeatDirection="Horizontal"> 
             <asp:ListItem Text="Display" Value="Display"></asp:ListItem> 
             <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem> 
            </asp:CheckBoxList> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <asp:CheckBoxList ID="chkTreatmentProvider" runat="server" RepeatDirection="Horizontal"> 
             <asp:ListItem Text="Display" Value="Display"></asp:ListItem> 
             <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem> 
            </asp:CheckBoxList> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <asp:CheckBoxList ID="chkConsumerStatus" runat="server" RepeatDirection="Horizontal"> 
             <asp:ListItem Text="Display" Value="Display"></asp:ListItem> 
             <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem> 
            </asp:CheckBoxList> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <asp:CheckBoxList ID="chkEthnicity" runat="server" RepeatDirection="Horizontal"> 
             <asp:ListItem Text="Display" Value="Display"></asp:ListItem> 
             <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem> 
            </asp:CheckBoxList> 
           </td> 
          </tr> 
         </table> 
        </div>

相关CSS类：

.formBroadLeftCol 
{ 
    padding: 0px 0px 0px 0px; 
    float:left; 
    width:450px; 
} 

.formShortRightCol 
{ 
    padding: 0px 0px 0px 0px; 
    float:right; 
    /*width:180px;*/ 
} 

.tdShortLeft 
{ 
    width:150px; 
    height:20px; 
    float:left; 
    padding: 5.5px 0px 5.5px 0px; 
} 

.tdShortRight 
{ 
    width:150px; 
    height:20px; 
    /*float:right; */ 
    padding: 5.5px 0px 5.5px 0px; 
} 

.tdShortMiddle 
{ 
    width:100px; 
    height:20px; 
    float:right; 
    margin:0px 25px 0px 0px; 
    padding: 5.5px 0px 5.5px 0px; 
}

来源

2011-06-01 asma

回答

1

发生这种情况，因为你有cr基于浮动的布局在各个块元素上。浮动元素突破了页面的正常流程。

你不认为你需要在td上应用float。您可以使用text-align: left;来对齐td中的元素。

来源

2011-06-08 11:12:51 Saurabh

相关问题

 相关问题