在css中包含父元素中的子元素

Question

我有一個水平的jquery-ui拖放列表，包含在一個包裝中，元素是動態添加的。 （各元素的寬度是223px並且每次添加新元素時，列表寬度增加223px）

$("#list_wrapper").animate({ 
width: "+=446" 
}, 'slow') 
$("#list_items").animate({ 
width: "+=223" 
}, 'slow') 

風格這兩種元素是：現在

#list_wrapper{ 
width:672px; 
position:relative; 
} 

#list_items { 
height: 290px; 
width: 672px; 
position: relative; 
padding: 0 0 0 2px; 
z-index: 0; 
cursor: e-resize; 
border-width: 0 2px; 
} 

，至瀏覽列表，我們可以拖動列表或創建導航按鈕以方便使用。導航按鈕轉移「#list_items」元素223px權利或每次被點擊時間留給：

$("#btn_next").click(function() { 
$("#list_items").animate({ 
left: "-=223" 
}, 100); 
}); 
$("#btn_prev").click(function() { 
$("#list_items").animate({ 
left: "+=223" 
}, 100); 

要確保列表不出去的觀點，我已經添加了這些屬性.draggable。

$("#list_items").draggable({ 
axis: "x", 
containment: "parent" 
}); 

這可以確保列表保持在容器（「＃cart_wrapper」）內拖動但當使用導航按鈕，該方法失敗時。那麼，是否有任何css技巧可以應用於使用導航按鈕時將列表保留在其父項中？

Answer 1

我didnt't測試你的代碼，但也許你可以做這樣的單擊事件：

• 獲取當前離開值，可以通過拖動
• 計算已經改變了差異下一個/上一個223px（或由一個下一個）
• 動畫這種差異（所以你要確保，一個元素是焦點）
• 左側邊緣的支票，你不要低於0
• 右側邊緣的支票，你只打你223px *項目，不要過度它去

與您的代碼，你可以將元素移動到無限的，因爲你不檢查一個邊緣是否到達。 :)