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 に答える