I have a div
container on my web page with fixed width and it contains form elements for logging in. Below these elements there are a submit button, forgotten password link etc.
It happens the last line elements need fewer width than the box provides. How to spread them evenly? I don't want
- default
| A B C |
- centering the line like
| A B C |
- nor table layout
| A | B | C |
Instead I am looking for some CSS way to achieve:
| A B C |
That is:
- put about equal space between all elements
- center the whole thing to avoid the first or last to the side
edit: This answer worked best. I created templates for 2 or 3 elements like this:
div.spread2evenly > div { display: inline-block; *display: inline; /* For IE7 */ zoom: 1; /* Trigger hasLayout */ width: 50%; text-align: center; }See Question&Answers more detail:os