CSS - 탭 맞춤 설정

Question

쇼핑 카트 스크립트로 작업하고 있으며 제품 카테고리가 포함 된 탭이 있습니다. 내 프로젝트에, 내가 9 개 범주를 가지고

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

건이며, 그 아래에 다른 탭을 래핑 :

다음은 탭 CSS입니다. (내 뜻은 여기를 참조하십시오 : http://desmond.imageshack.us/Himg607/scaled.php?server=607&filename=screenshot20120516at170.png&res=landing)

보시다시피, 탭 버튼이 상단 막대 너비를 채우지 않기 때문에 모양이 좋지 않습니다.

버튼 탭을 "정당화"할 방법이 있습니까? 방법 http://desmond.imageshack.us/Himg27/scaled.php?server=27&filename=toptabs.jpg&res=landing

어떤 생각 :

그래서 그것의 모습 (저기 CSS에, .paypalshop .shop-그룹이다)? 여기에 붙여 넣은 CSS를 수정해야합니다.

감사합니다.

---

편집 : 다음은이 개 범주 내 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