JQuery UI CSS列表位置底部

我在用jQueryUI和css创建可排序的条形图时遇到了一些问题。我必须在我的

标记上使用

float:left

，而不是

display:inline block

，以防止拖动条时边距混乱，但这意味着条会到达容器顶部而不是底部

谷歌搜索告诉我，实现“浮动底部”的标准方法是在容器上放置

position:relative

，然后放置

position:absolute；底部：元素上的0px，但这样做只会使
的堆栈彼此重叠

我不知道如何将
水平分开，并使jquery可排序工作，或者如何以其他方式实现这一点

示例：
您可以使用
显示：内联块
并分配
！重要信息
到
右边距：5px
停止jQuery的写入

margin-right:5px !important;

试试这个：


JS

CSS

基本上，我会浏览每个列表项，并设置它们的底部位置以匹配它们的高度

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

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