jquery buttons do not align properly

Question

Does anyone know how to align these jquery buttons without using float:left?

This problem occurs when <button> and any other elements like <a> are used:

http://jsbin.com/afixij/edit#javascript,html,live

Same problem is also on jquery's website:

http://jqueryui.com/demos/button/#default

Answer 1

I didn't have this issue before, so I checked my old codes using older versions of jquery-ui. I noticed that old .ui-button class had overflow:visible instead of overflow:hidden Changed it to overflow:visible, voila it's fixed.

Answer 2

It's because the class .ui-button in jquery-ui.css is using display: inline-block;

The problem goes away if you change that to display: inline-table;