div float：asp TabContainer中的左侧样式

时间：2010-09-16 20:07:09

标签： asp.net css ajaxcontroltoolkit

我正在使用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>

2 个答案:

答案 0 :(得分：1)

这是一个真正的痛苦。因此，您不能只将样式属性添加到TabContainer，如“BorderStyle = 0”，因为它只是忽略它们。相反，必须指定自定义样式类。哦，顺便说一下，这意味着你必须自定义整个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源代码中获取了它们。我搜索了该文件夹一个被称为“制表left.gif”并把它拉到包含所有图像UP的文件夹），您也需要改变您指定为的CssClass属性的任何名称的“.ajax__tab_xp”到“.CustomTabStyle”或：

/* 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”并且浮动问题已经消失，但它在选项卡和顶部内容的末尾之间引入了一个丑陋的差距。所以我放弃了边框并将其设置为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>

容易对吗？的Bleh ...

答案 1 :(得分：0)

如果我没记错的话，当父元素没有设置浮点值时，我已经看到元素在某些浏览器中浮动在父容器之外。这在黑暗中有点像，但我建议将style="float:inherit"或style="float:left"添加到标签容器周围的div。

希望这会有所帮助......

相关问题
最新问题