CSS - 對齊標籤

我正在使用購物車腳本，並且存在包含產品類別的選項卡。CSS - 對齊標籤

這裏的標籤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>

來源

2012-05-16 larin555

你的HTML看起來像什麼？ – Jason

我編輯了我的帖子。謝謝！ – larin555

根據對象的數量，您應該讓每個元素都是容器的X％寬度。所以如果你有一排4個項目，所有的寬度設置爲25％。 25 x 4 = 100％的空間。 – AJak