CSS - Justifier les onglets

Question

Je travaille avec un script de panier d'achat, et il y a des onglets qui contiennent les catégories de produits.

Voici le css onglets:

.paypalshop .shop-groups{ 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
background-color: #ddd; 
border-bottom: 1px solid #ccc; 
} 

.paypalshop .shop-groups li{ 
    float: left; 
    border: 1px solid #ccc; 
} 

.paypalshop .shop-groups a{ 
display: block; 
line-height: 20px; 
font-size: 1.1em; 
min-width: 20px; 
padding: 2px 15px; 
text-align: center; 
color: #777; 
font-weight: bold; 
text-shadow:0 1px 1px #fff; 
} 

.paypalshop .shop-groups a:hover{ 
color: #555; 
} 

.paypalshop .shop-groups .active-group { 
background-color: #e5e5e5; 
} 

.paypalshop .shop-groups .active-group a{ 
color: #da0000!important; 
} 

La chose est que dans mon projet, j'ai 9 catégories, et il enveloppe les autres onglets sous. (voir ce que je veux dire ici: http://desmond.imageshack.us/Himg607/scaled.php?server=607&filename=screenshot20120516at170.png&res=landing)

Comme vous pouvez le voir, il ne semble pas très bien comme il est ... parce que les boutons d'onglets ne remplissent pas la largeur de la barre supérieure. Y at-il un moyen de "justifier" les onglets de boutons? (Dans le CSS là-bas, ce sont des groupes de .SHOP-.paypalshop a)

Il ressemblerait à ceci: http://desmond.imageshack.us/Himg27/scaled.php?server=27&filename=toptabs.jpg&res=landing

Toute idée? Cela doit être fait en modifiant le CSS que j'ai collé ici.

Merci!

---

EDIT: Voici comment 2 catégories sont faites dans mon code HTML:

<!-- group1--> 
<ul id="Presentoirs"> 
<li class="product" name="Geotop" price="20.5"> 
         <a class="product-image fancybox" href="images/product_big.jpg" title="Picture 4"> 
          <img src="images/product_2.png" alt="Preview"/> 
          <div class="text-overlay"> 
           <p class="product-heading">Description</p> 
           Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
           doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
           veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
          </div> 
         </a> 
         <p class="product-heading">Geotop</p> 
         <a href="#" class="product-buy">Ajouter au panier</a> 
         <p class="product-meta">some additional comment</p> 
         <div class="product-price">20.5<span class="product-currency">$</span></div> 
        </li> 
</ul> 

<!-- group2--> 
<ul id="Bannieres_et_Supports_en_A"> 
<li class="product" name="Geotop" price="20.5"> 
         <a class="product-image fancybox" href="images/product_big.jpg" title="Picture 4"> 
          <img src="images/product_2.png" alt="Preview"/> 
          <div class="text-overlay"> 
           <p class="product-heading">Description</p> 
           Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
           doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
           veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
          </div> 
         </a> 
         <p class="product-heading">Geotop</p> 
         <a href="#" class="product-buy">Ajouter au panier</a> 
         <p class="product-meta">some additional comment</p> 
         <div class="product-price">20.5<span class="product-currency">$</span></div> 
        </li> 
</ul> 

Answer 1

Vous pouvez utiliser :nth-child propriété et ajouter width spécifique pour chaque onglet.

Read about :nth-child