div float:asp TabContainer 中的 left 样式
我使用的是 ASP.NET Ajax 控件工具包 v3.5 TabContainer 控件。每当我使用“float:left”样式时，我的选项卡容器“放开”它所包含的 div，并且我的所有内容都显示在选项卡控件外部/与选项卡控件断开连接（选项卡区域周围有黑色边框）。在网上，有人说设置“overflow:hidden”有帮助，但这似乎在 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>
I am using ASP.NET Ajax control toolkit v3.5 TabContainer control. Anytime I use the style "float:left" my tab container "lets go" of the div's it contains and all my content appears outside/disconnected from the tab control (there's a black border around the tab area). Online, some people say setting "overflow:hidden" helps, but this doesn't appear to work within the context of the TabContainer. Its all busted in FF and IE. Anybody know how to fix this?
<%@ 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这真是一件痛苦的事。因此，您不能只向 TabContainer 添加样式属性（例如“BorderStyle=0”），因为它会忽略它们。相反，必须指定自定义样式类。哦，顺便说一句，这意味着您必须自定义整个 CSS 样式，而不是覆盖单个类！哇哦，好的设计！！
好消息是您可以下载 AJAX Control Toolkit 的源代码并查找“Tabs.css”。这是 TabContainer 的“默认样式”。或者，只需复制所有这些代码：
现在您已经有了原始的 CSS 样式，您需要更新 CSS 以删除
<%=WebResource垃圾并将其指向您自己的图像（我将我也在 Ajax 源代码中搜索了一个名为“tab-left.gif”的文件，它提取了包含所有图像的文件夹。）您还需要将“.ajax__tab_xp”更改为“.CustomTabStyle”或您指定为 CssClass 属性的任何名称：我将“float:left”添加到“ajax__tab_body”中，浮动问题消失了，但它在选项卡和顶部内容末尾之间引入了一个丑陋的间隙。所以我放弃了边框，将其设置为0像素。
这是最终的 asp.net
Easy 吧？哎呀……
This one was a real pain. So, you can't just add styling attributes to the TabContainer like "BorderStyle=0" because it just ignores them. Instead, have to specify a custom style class. Oh, and by the way this means you have to customize the entire Css style instead of overriding a single class!! Woot for good design!!
The good news is that you can download the source code for AJAX Control Toolkit and look for "Tabs.css". This is the "default style" for TabContainer. Or, just copy all this code:
Now that you have the original CSS styling, you need to update the CSS to remove the
<%=WebResourcejunk and point it to your own images (I took the ones from the Ajax source code too. I searched the folder for a file called "tab-left.gif" and it pulled the folder containing all the images up.) You also need to change the ".ajax__tab_xp" to ".CustomTabStyle" or whatever name you specify as the CssClass attribute:I added "float:left" to "ajax__tab_body" and the float issue was gone, but it introduced an ugly gap between the tabs and the end of the content at the top. So I gave up on the border and set it to 0 pixels.
Here's the final asp.net
Easy right? bleh...
如果我没记错的话，当父元素没有设置浮动值时，我曾在某些浏览器中看到元素浮动在其父容器之外。这有点盲目，但我建议将
style="float:inherit"或style="float:left"添加到围绕选项卡容器。希望这有帮助...
If I recall correctly, I've seen elements float outside their parent container in certain browsers when the parent element did not have a float value set. This is a bit of a shot in the dark, but I would recommend adding
style="float:inherit"orstyle="float:left"to the div around the tab container.Hope this helps...