Question

我无法找到使用ASP.net ajax选项卡控件执行多行选项卡的方法。我也找不到关于使用CSS制作多行标签的教程或示例。

如果你不明白我在寻找什么，那就是我正在寻找的形象 http://bp1.blogger.com/_WCGCQYWEaxs/Rq1c2bLNMDI/AAAAAAAAABU/0sKw_CrKLL4/s1600-h/dsd.jpg

有人可以给我一个关于如何实现多行标签的链接吗？

Answer 1

每个标签都是li对象。将每个设置为float:left除非您在ul容器上设置了绝对高度，否则当第一行的空间不足时，li应该换行到下一行

这样简单应该可行，但可能需要一些踢法：

<ul id="nav">
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
</ul>

CSS：

#nav {width:200px;}
#nav li {float:left;background:#eee;}

至于背景，正如伊兰所说，你会想要使用推拉门方法。它非常简单，应该可以在不添加任何额外HTML的情况下实现，只需将CSS修改为以下内容：

#nav {width:200px;}
#nav li {float:left;background:url(tab-bg.png) top right no-repeat;padding-right:5px}
#nav a {float:left;background:url(tab-bg.png) 0 -5px no-repeat;padding-left:5px}

请记住，我已经在现场制作了所有这些代码。你的应该看起来很相似，但记住我的完全未经测试。阅读完整的推拉门教程，了解我在说什么以及它是如何工作的。

修改：我刚刚重新阅读了标题和标签。你想要这个预制ASPNET控件。我会看看你是否可以做一个纯CSS方法。尝试将滑动门方法应用于您所拥有的。如果你无法弄清楚如何使用当前的HTML，请编辑你的问题并将其发布在下面，我相信有人可以帮助你让你的标签表现出来。

Answer 2

我通常使用未排序的列表（UL），其列表项已浮动，因此它们彼此相邻堆叠。网上有很多很好的教程，只是google“CSS tabs”。这是来自A List Apart的nice one。

Answer 3

如果您将一个结束范围和 Div ，然后将新的注入行的最后一个标签面板的标题模板中，该标签panles将分成多行（似乎无论如何都适合我）。您可以使用 CSS 而不是后面的样式内容，但我只看了几分钟。

行上最后一个标签的示例：

<cc1:TabPanel ID="tbpnAttLists" runat="server" HeaderText="Attribute Lists">
<HeaderTemplate>
Attribute Lists
</span>
</div>
<div class="ajax__tab_xp" style="width:100%; border-bottom:solid 1px silver; border-right: solid 1px silver; border-left: solid 1px silver;font-family:verdana,tahoma,helvetica;font-size:11px; ">
</HeaderTemplate>

使用CSS的多行选项卡

3 个答案: