div浮動：一個asp中的左側樣式TabContainer

我正在使用ASP.NET Ajax控件工具包v3.5 TabContainer控件。任何時候，當我使用樣式「float：left」時，我的標籤容器「放開」它所包含的div，並且所有內容都出現在標籤控件的外部/斷開連接處（標籤區域周圍有一個黑色邊框）。在線上，有人說設置「overflow：hidden」會有所幫助，但這似乎並不適用於TabContainer的上下文。其全部都在FF和IE中破譯。任何人都知道如何解決這個問題？div浮動：一個asp中的左側樣式TabContainer

<%@ 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>

來源

2010-09-16 P.Brian.Mackey

這是一個真正的痛苦。所以，你不能像「BorderStyle = 0」一樣向TabContainer添加樣式屬性，因爲它只是忽略它們。相反，必須指定一個自定義樣式類。哦，順便說一句，這意味着你必須自定義整個Css風格，而不是重寫一個類！ Woot爲好設計！

好消息是，您可以下載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垃圾並將其指向自己的圖片（我把那些從阿賈克斯我在文件夾中搜索了一個名爲「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」，浮動問題消失了，但它引入了標籤和頂部內容結尾之間的醜陋間隙。所以我放棄了邊界並將其設置爲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>

容易吧？呃...

來源

2010-09-16 21:38:13

如果我沒有記錯，我見過的元素漂浮在某些瀏覽器父容器外時，父元素沒有一個浮點值集。這是在黑暗中的一點點，但我會建議將style="float:inherit"或style="float:left"添加到標籤容器周圍的div。

希望這會有所幫助...

來源

2010-09-16 20:26:26

我剛剛試過兩種。它在IE或FF中沒有任何區別。 – 2010-09-16 20:30:56

您是否嘗試過以下解決方案：http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing？我的猜測是，它最終是一個類似的問題...... – 2010-09-16 21:28:49

div浮動：一個asp中的左側樣式TabContainer

回答

相關問題