2011-09-09 105 views
0

我有一個邊框半徑爲20px的div。內部UL與邊界半徑重疊。我想這個UL是滾動的,所以我不能只是應用邊界半徑列表藏漢..內部UL重疊邊框半徑

任何幫助,將不勝感激:)

+0

可以提供有關問題的因素的更多信息?一些CSS或標記可能? – rlemon

+0

@Aljullu對不起,我試圖在jQuery移動應用程序中使用iScroll,這意味着我的包裝器具有'position:absolute;'這打破了Aljullu的代碼。我輸出的代碼是:'

  • 1
  • 10
' –

+0

我的CSS是:'#results .products { height:300px; \t寬度:100%; \t邊框:3px純紅色; \t border-radius:20px; \t背景:白色; \t位置:相對; \t溢出:隱藏; } #results .products div#scroller { \t background:black; \t身高:100%; \t寬度:100%; \t position:absolute; } #results .products ul { \t list-style-type:none; \t padding:0; } #results .products ul li {background:rgb(255,255,255);/*舊版瀏覽器*/ height:75px; border-bottom:1px solid#999; 寬度:100%; }' –

回答

0

一個辦法解決這個問題是使填充該div更大

4

試穿把溢出:隱藏在包裝div以防止內部UL重疊的邊界半徑。

然後,設置溢出:在內部UL滾動以使其可滾動(如果沒有足夠的垂直空間)。

我做了一個簡單的例子:

<style> 
#wrapper { 
    background: #DDD; 
    border-radius: 20px; 
    overflow: hidden; 
} 
ul { 
    background: #AAA; 
    margin: 0; 
    max-height: 100px; 
    overflow: auto; 
    padding: 0; 
} 
</style> 
<div id="wrapper"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
     <li>Item 6</li> 
     <li>Item 7</li> 
     <li>Item 8</li> 
    </ul> 
</div>