CSS - 对齐标签

Question

我正在使用购物车脚本，并且存在包含产品类别的选项卡。

这里的标签CSS：

.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; 
} 

的事情是，在我的项目，我有9个大类，并在包裹的其他选项卡。 （看我这里的意思是：http://desmond.imageshack.us/Himg607/scaled.php?server=607&filename=screenshot20120516at170.png&res=landing）

正如你所看到的，它看起来并不是很好......因为这些标签按钮并没有填充顶部条宽。

有没有办法“证明”按钮标签？ （在CSS那里，它是.paypalshop .shop团一）

因此，它看起来像：http://desmond.imageshack.us/Himg27/scaled.php?server=27&filename=toptabs.jpg&res=landing

任何想法如何？它需要完成修改我粘贴在这里的CSS。

谢谢！

---

编辑：下面是2类是如何在我的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

您可以使用:nth-child礼，并添加特定width每一个标签。

Read about :nth-child