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

Alain · Accepted Answer · 2012-04-05 18:33:40Z

1

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

enter image description here

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

enter image description here

edited Apr 5, 2012 at 18:33

answered Apr 5, 2012 at 18:28

Alain

27.4k21 gold badges123 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Selvakumar Arumugam Over a year ago

display: inline-table is a Table model values. Not sure it is good to use in this scenario.

Alain Over a year ago

? See w3schools.com/cssref/pr_class_display.asp, the purpose of 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 htmlhelp.com/reference/html40/block.html)

Ergec Over a year ago

after change, chrome does the same thing :(

Alain Over a year ago

Well I hope you'll consider an upvote on an answer that works for ie 7+ and firefox. Honestly, you're always going to run into CSS problems when you're using someone else's hugely complicated CSS libraries and trying to get the same behaviour on all browsers. I recommend dialing back on the number of styles inherited. If you want a workaround, do what display: inline-table is supposed to do - just place your elements in a table: jsbin.com/afixij/3/edit

Ergec · Accepted Answer · 2012-04-05 19:08:36Z

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.

answered Apr 5, 2012 at 19:08

Ergec

11.9k7 gold badges54 silver badges68 bronze badges

1 Comment

Alain Over a year ago

Congrads :p Gotta love those abstract css tags that give you all sorts of weird behaviour.

Collectives™ on Stack Overflow

jquery buttons do not align properly

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related