jquery - 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

您可以使用display: inline-block并分配!important给以margin-right:5px阻止 jQuery 重写它。

margin-right:5px !important;

Answer 2

试试这个：

工作示例

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;
}

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