JQuery-UI CSS 列表位置底部

Question

我在使用 jquery-ui 和 css 创建可排序条形图时遇到了一些问题。我不得不使用 float: left在我的 <li>标签而不是 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;
}

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