如何解决CSS与ASP.NET表控件冲突
| 我有一些单选按钮,在它们上面应用了CSS来对齐它们。 这是图片: 这些都放置在一个表中,并且表的第三列包含针对每对单选按钮的一个列表框或下拉列表,当我单击第二个单选按钮时,隐藏的列表框或下拉列表会出现在第三列中。 当我在其上应用CSS设置其高度和宽度时,当我单击每对的第二个单选按钮并出现列表框时,第三列不会动态增长。见图片: 我无法删除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;
}
解决方法
发生这种情况是因为您已经在各种块元素上创建了基于浮动的布局。浮动元素超出了页面的正常流程。
您认为不需要在ѭ3上应用浮点数。您可以使用
text-align: left;
对齐td
中的元素。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。