我正在使用 ASP.NET Ajax 控件工具包 v3.5 TabContainer 控件。每当我使用“float:left”样式时,我的选项卡容器都会“释放”它包含的 div,并且我的所有内容都出现在选项卡控件之外/与选项卡控件断开连接(选项卡区域周围有黑色边框)。在网上,有人说设置“溢出:隐藏”有帮助,但这似乎在 TabContainer 的上下文中不起作用。它在 FF 和 IE 中都被破坏了。有人知道如何解决这个问题吗?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabControl.aspx.cs" Inherits="WebApplication1.TabControl" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server"/>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="2">
<asp:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
<ContentTemplate>
<div>I'm all nice and pretty inside the tab</div><div>Me too I'm pretty inside tab, but I fall to the nextline.</div>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
<ContentTemplate>
<div style="float:left;">This is messed up on float</div><div style="float:left;">Watch as I fall onto the line</div>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</div>
</form>
</body>
</html>
最佳答案
这个真的很痛苦。因此,您不能像“BorderStyle=0”那样向 TabContainer 添加样式属性,因为它会忽略它们。相反,必须指定自定义样式类。哦,顺便说一句,这意味着您必须自定义整个 Css 样式,而不是覆盖单个类!!求好设计!!
好消息是您可以下载 AJAX Control Toolkit 的源代码并查找“Tabs.css”。这是 TabContainer 的“默认样式”。或者,只需复制所有这些代码:
/* default layout */
.ajax__tab_default .ajax__tab_header {white-space:nowrap;}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}
/* xp theme */
.ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}
.ajax__tab_xp .ajax__tab_outer {padding-right:4px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right;height:21px;}
.ajax__tab_xp .ajax__tab_inner {padding-left:3px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}
/* scrolling */
.ajax__scroll_horiz {overflow-x:scroll;}
.ajax__scroll_vert {overflow-y:scroll;}
.ajax__scroll_both {overflow:scroll}
.ajax__scroll_auto {overflow:auto}
现在您有了原始的 CSS 样式,您需要更新 CSS 以删除 <%=WebResource
垃圾并将其指向您自己的图像(我也从 Ajax 源代码中获取了这些图像。我在文件夹中搜索了一个名为“tab-left.gif”的文件,并将包含所有图像的文件夹拉了起来。)您还需要将“.ajax__tab_xp”更改为“.CustomTabStyle”或您指定为 CssClass 属性的任何名称:
/* default layout */
.ajax__tab_default .ajax__tab_header {white-space:nowrap;}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}
/* xp theme */
.CustomTabStyle .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}
.CustomTabStyle .ajax__tab_outer {padding-right:4px;background:url('../images/Tabs/tab-right.gif') no-repeat right;height:21px;}
.CustomTabStyle .ajax__tab_inner {padding-left:3px;background:url('../images/Tabs/tab-left.gif') no-repeat;}
.CustomTabStyle .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url('../images/Tabs/tab.gif') repeat-x;}
.CustomTabStyle .ajax__tab_hover .ajax__tab_outer {background:url('../images/Tabs/tab-hover-right.gif') no-repeat right;}
.CustomTabStyle .ajax__tab_hover .ajax__tab_inner {background:url('../images/Tabs/tab-hover-left.gif') no-repeat;}
.CustomTabStyle .ajax__tab_hover .ajax__tab_tab {background:url('../images/Tabs/tab-hover.gif') repeat-x;}
.CustomTabStyle .ajax__tab_active .ajax__tab_outer {background:url('../images/Tabs/tab-active-right.gif') no-repeat right;}
.CustomTabStyle .ajax__tab_active .ajax__tab_inner {background:url('../images/Tabs/tab-active-left.gif') no-repeat;}
.CustomTabStyle .ajax__tab_active .ajax__tab_tab {background:url('../images/Tabs/tab-active.gif') repeat-x;}
.CustomTabStyle .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:0px solid #999999;border-top:0;padding:8px;background-color:#ffffff;float:left;}
/* scrolling */
.ajax__scroll_horiz {overflow-x:scroll;}
.ajax__scroll_vert {overflow-y:scroll;}
.ajax__scroll_both {overflow:scroll}
.ajax__scroll_auto {overflow:auto}
我将“float:left”添加到“ajax__tab_body”, float 问题消失了,但它在选项卡和顶部内容末尾之间引入了一个难看的间隙。所以我放弃了边框并将其设置为 0 像素。
这是最后的asp.net
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabControl.aspx.cs" Inherits="WebApplication1.TabControl" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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">
<link href="css/Site.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="float:inherit;">
<asp:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server"/>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="2" CssClass="CustomTabStyle">
<asp:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
<ContentTemplate>
<div>I'm all nice and pretty inside the tab</div><div>Me too I'm pretty inside tab, but I fall to the nextline.</div>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
<ContentTemplate>
<div style="width:100px;">This is messed up on float<div style="float:left;">Watch as I fall onto the line</div></div>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</div>
</form>
</body>
</html>
简单吧?呸……
关于asp.net - div float :left style within an asp TabContainer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3730373/