Странные поля после сортировки в jqueryUi

0

У меня есть эта странная проблема с полями в сортировке после перетаскивания. поля, кажется, исчезают и вставляются друг в друга. Играл с ним довольно много и не мог найти проблему.

Любая помощь будет высоко оценен.

Здесь скрипка: 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; }

(Сортировка и перетаскивание, чтобы увидеть маржу)

  • 0
    тогда что ты хочешь?
  • 0
    Вы хотите, чтобы между левым и правым li свободное пространство, как сейчас? или все они должны быть свернуты?
Показать ещё 2 комментария
Теги:
jquery-ui-sortable
jquery-ui-draggable

1 ответ

3
Лучший ответ

Установите элементы 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/

  • 0
    Почему у нас была такая проблема?
  • 0
    @IshankGupta Я обновил свой ответ.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню