JQuery-UI CSS List Position Bottom

Question

У меня возникли проблемы с созданием сортируемой гистограммы с jquery-ui и css. Мне нужно использовать float: left на моих <li> тегах вместо display: inline-block, чтобы предотвратить портирование полей при перетаскивании баров, но это означает, что бары обозначают верхнюю часть контейнера, а не нижнюю.

Немного Googling мне подсказывает, что стандартный способ достижения «флоат», чтобы положить position: relative на контейнер, а затем position: absolute; bottom: 0px на элементах, но делает это только делает стек <li> «s друг на друга.

Я не уверен, как разместить <li> в горизонтальном положении и по-прежнему работать в jquery sortable, или как это сделать в противном случае.

Пример: 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;