0

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

这是标签 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-groups a）

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

知道怎么做吗？需要修改我在此处粘贴的 CSS。

谢谢！

编辑：这是在我的 HTML 代码中创建 2 个类别的方式：

 <!-- 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>
4

1 回答 1

0

您可以使用:nth-child适当性并width为每个选项卡添加特定内容。

阅读关于 :nth-child

于 2012-05-17T00:48:20.210 回答