изображения с переключателями в списке отображаются по диагонали

Question

Я пытаюсь заставить все изображения быть в горизонтальном скроллере с переключателем (желательно) под изображениями. Я продолжаю сталкиваться с проблемой, когда следующее изображение хочет начать внизу переключателя.

пример проблемы с кодом, http://jsfiddle.net/zVrq8/

Я не понимаю, что здесь происходит.

Answer 1

Я сделал это для первых двух предметов. В остальном это то же самое: ссылка

Что я сделал, добавил float: left к li:

div#lasteventimg ul li{ 
    float:left;
}

таким образом li будет идти рядом с предыдущим li, пока в ul

есть место

Второе, что я изменил, - это HTML, добавленный к одному li как к изображению, так и к входу, а также <br /> для ввода под изображением. Есть и другие способы сделать это, но здесь это показалось самым простым.