JQuery-UI CSS列表位置底部

Question

我在使用jquery-ui和css創建排序條形圖時遇到了一些麻煩。我不得不在<li>標籤上使用float: left而不是display: inline-block，以防止在拖動條塊時邊距變亂，但這意味着條塊可以在容器頂部而不是底部。

谷歌搜索的位告訴我，要實現「浮動底」的標準方法是把position: relative容器上，然後position: absolute; bottom: 0px上的元素，但這樣做只是讓彼此的頂部<li>的堆棧。

我不知道如何定位<li>的水平分隔，仍然有jquery排序工作，或如何以其他方式實現此目的。

例子：http://jsfiddle.net/NaWsd/

Answer 1

試試這個：

Working Example

JS

$('li').each(function() { 
    $(this).css({ 
     bottom: $(this).css('height') 
    }); 
}); 

CSS

li { 
    background-color: red; 
    list-style: none; 
    float:left; 
    margin-right:5px; 
    width: 15px; 
    position:relative; 
} 
#sortable1 { 
    position:absolute; 
    top:100px; 
} 

基本上我要通過各列表項，設置其底部位置以匹配他們的高度。

Answer 2

你可以使用display: inline-block，並分配給!important在margin-right:5px寫它停止了jQuery。

margin-right:5px !important;