Многострочные вкладки с использованием CSS

Я обычно использую несортированный список (UL), в котором элементы списка располагаются так, чтобы они располагались рядом друг с другом. В Интернете есть множество хороших руководств, просто погуглите «CSS tabs». Вот хороший из A List Apart.

Каждая вкладка - это объект 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, отредактируйте свой вопрос и опубликуйте его внизу, и я уверен, что кто-нибудь поможет вам наладить работу ваших вкладок.

If you inject a closing Охватывать and Div then a new в шаблон заголовка последней панели вкладок в строке панели вкладок будут разделены на несколько строк (в любом случае, похоже, у меня работает). Вы могли бы использовать 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>