2016-03-31 3 views
0

私のコードのドロップダウンリストにスクロールバーを追加したいのですが、実際にはカートをクリックするとカート内のアイテムを表示するカートです。ドロップダウンボックスのサイズが固定されているので、スクロールバーを押してその上に項目を表示したいと思っています。devクラスにスクロールバーを挿入するには

私はカートのために使用されるコードは次のとおりです。

<ul id="cart-dropdown" class="box-dropdown parent-arrow"> 
<li> 
<div class="box-wrapper parent-border"> 
<p>Recently added item(s)</p> 
<table class="cart-table"> 
<tr> 
<td><img src="img/products/sample1.jpg" alt="product"></td> 
<td> 
<h6>Lorem ipsum dolor</h6> 
<p>Product code PSBJ3</p> 
</td> 
<td> 
<span class="quantity"><span class="light">1 x</span> $79.00</span> 
<a href="#" class="parent-color">Remove</a> 
</td> 
</tr> 
<tr> 
<td><img src="img/products/sample1.jpg" alt="product"></td> 
<td> 
<h6>Lorem ipsum dolor</h6> 
<p>Product code PSBJ3</p> 
</td> 
<td> 
<span class="quantity"><span class="light">1 x</span> $79.00</span> 
<a href="#" class="parent-color">Remove</a> 
</td> 
</tr> 
<tr> 
<td><img src="img/products/sample1.jpg" alt="product"></td> 
<td> 
<h6>Lorem ipsum dolor</h6> 
<p>Product code PSBJ3</p> 
</td> 
<td> 
<span class="quantity"><span class="light">1 x</span> $79.00</span> 
<a href="#" class="parent-color">Remove</a> 
</td> 
    </tr> 
</table> 
<br class="clearfix"> 
</div>            
<div class="footer"> 
<table class="checkout-table pull-right"> 
<tr> 
<td class="align-right">Tax:</td> 
<td>$0.00</td> 
</tr> 
<tr> 
<td class="align-right">Discount:</td> 
<td>$37.00</td> 
</tr> 
<tr> 
<td class="align-right"><strong>Total:</strong></td> 
<td><strong class="parent-color">$999.00</strong></td> 
</tr> 
</table> 
</div> 
<div class="box-wrapper no-border"> 
<a class="button pull-right parent-background" href="#">Checkout</a> 
<a class="button pull-right" href="order_info.html">View Cart</a> 
</div> 
</li> 
</ul> 

答えて

0

このようなものが欲しいですか?

See this fiddle

#cart-dropdown { height: 300px; overflow-y: scroll;} 
+0

ありがとう。私は自分のコードでこれを試してみる – DiN

1

は、あなたの要素のCSSにoverflow:scrollを追加しようとしたことがありますか?

+0

ありがとうございます。私はこれを試してみます – DiN

関連する問題