Bien chaque onglet est un objet li
. Définissez chacun à float:left
et à moins que vous ayez défini une hauteur absolue sur votre conteneur ul
, lorsque vous manquez d'espace sur la première ligne, les li
doivent passer à la ligne suivante.
Quelque chose d'aussi simple que cela devrait fonctionner, mais il pourrait avoir besoin coups de pied:
<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;}
En ce qui concerne les milieux, comme le dit Eran, vous aurez envie d'utiliser la méthode des portes coulissantes. Il est assez simple et il devrait être possible sans ajouter de HTML supplémentaire, simplement modifier le CSS à quelque chose comme ceci:
#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}
S'il vous plaît nu à l'esprit, je l'ai fait tout ce code sur place. Le vôtre devrait ressembler, mais rappelez-vous que le mien n'a pas été testé. Lisez le didacticiel sur les portes coulissantes pour savoir de quoi je parle et comment cela fonctionne.
Modifier: Je viens de relire le titre et les balises. Vous voulez cela pour un contrôle ASPNET préfabriqué. Je verrais si vous pouvez faire une méthode CSS pure. Essayez d'appliquer la méthode de la porte coulissante à ce que vous avez. Si vous ne pouvez pas comprendre comment travailler avec le HTML actuel, éditez votre question et publiez-la dessous et je suis sûr que quelqu'un peut vous aider à faire fonctionner vos onglets.