Я вижу скриншот, и теперь понятно, что вы имеете в виду. Ваш первоначальный пример был далеко не ценным, он был неполным. Я скопировал его, и я вижу, что все li находятся ниже друг друга, все идеально выровнены внизу. Вы должны были создать короткий, самостоятельный, правильный пример , который точно воспроизводит вашу проблему. Таким образом, от <html> до </html>, включая тип документа и минимально необходимые стили.
Теперь я догадываюсь, но похоже, что вы использовали float: left; на элементах li вместо display: inline;, чтобы отображать их рядом друг с другом (inline) вместо друг друга (блок). Поплавки по умолчанию выровнены по верху содержащего элемента, а display-inline по умолчанию выровнен по низу вмещающего элемента. Исправьте это соответствующим образом и посмотрите, поможет ли это в вашем случае.