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

Question

Я не могу найти способ сделать несколько вкладок строк с помощью управления вкладками ajax ASP.net. Я также не могу найти учебник или пример использования CSS для создания нескольких строк вкладок.

Если вы не понимаете, что я ищу, это изображение того, что я ищу http://bp1.blogger.com/_WCGCQYWEaxs/Rq1c2bLNMDI/AAAAAAAAABU/0sKw_CrKLL4/s1600-h/dsd.jpg

Может кто-нибудь дать мне ссылку о том, как добиться нескольких строк вкладок?

Answer 1

Ну, каждая вкладка - это li объект. Установите для каждого из них значение float:left, и если вы не установили абсолютную высоту для контейнера ul, когда у вас заканчивается свободное место в первой строке, li s следует перенести на следующую строку.

Что-то настолько простое, как это должно работать, но может потребоваться небольшой удар:

<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". Вот хороший из A List Apart.

Answer 3

Если вы вставите закрывающие Span и Div , тогда новый в шаблон заголовка последней панели вкладок в строке, панели вкладок будут разделены в несколько рядов (кажется, работает для меня в любом случае). Вы могли бы использовать 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>