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:
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.
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;
display: inline-table is a Table model values. Not sure it is good to use in this scenario - Selvakumar Arumugam 2012-04-05 18:35
display: inline-table is to display elements as an inline-table, which is perfect when you have something like a series of buttons you want displayed in alignment with each other. inline-block places the element as an inline element (on the same line as adjacent content), but it behaves as a block element - which is the problem here since when rendered visually, block-level elements usually begin on a new line. (See http://htmlhelp.com/reference/html40/block.html - Alain 2012-04-05 18:38