У меня есть эта странная проблема с полями в сортировке после перетаскивания. поля, кажется, исчезают и вставляются друг в друга. Играл с ним довольно много и не мог найти проблему.
Любая помощь будет высоко оценен.
Здесь скрипка: http://jsfiddle.net/YsG6S/
И CSS:
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; width:500px; }
li { width: 200px; height:100px; display:inline-block; border:1px solid black; }
(Сортировка и перетаскивание, чтобы увидеть маржу)
Установите элементы li
для display: block
и поместите их.
/* changes */
li {
display: block;
margin-right: 2px; /*if you want the space*/
float: left;
}
Сценарий: http://jsfiddle.net/mKeAL/
ИЗМЕНИТЬ 1
Похоже, что это некоторая ошибка с пробелом/отображением в строке с пользовательским интерфейсом jquery.
Об этом сообщается здесь: http://bugs.jqueryui.com/ticket/6942
Автор ответил "работает для меня", указывая на эту рабочую скрипку http://jsfiddle.net/T8gkC/, но обратите внимание на пробелы в элементах списка в HTML. Я помню ошибку IE5.5 (6), которая имела аналогичное разрешение. Если вы сделаете HTML "нормальным", ошибка вернется: http://jsfiddle.net/94Vs2/ Добавление поля в элементы списка помогает немного, но если вы посмотрите внимательно, ошибка все еще существует.
Итак... если вам нужно, чтобы они display: inline-block
вы можете попытаться удалить пустое пространство между каждым <li>
.
EDIT 2
В соответствии с ответом в разделе "Пространство" между элементами списка "Inline-Block List" вы также можете установить font-size
0 на ul
и сбросить его на li
: http://jsfiddle.net/YsG6S/2/ Прекрасно работает, маркер, Тем не менее, обратите внимание на разницу в процессах перетаскивания/сортировки/сортировки с помощью метода block/float
сравнению с любым из inline-block
методов.
ИЗМЕНИТЬ 3
Другой вариант - сильно пить из фонтана HTML5 и опустить теги закрытия </li>
. http://jsfiddle.net/mKeAL/1/
li
свободное пространство, как сейчас? или все они должны быть свернуты?