How do I *really* justify a horizontal menu in HTML+CSS?
You find plenty of tutorials on menu bars in HTML, but for this specific (though IMHO generic) case, I haven’t found any decent solution:
# THE MENU ITEMS SHOULD BE JUSTIFIED JUST AS PLAIN TEXT WOULD BE # # ^ ^ #
- There’s an varying number of text-only menu items and the page layout is fluid.
- The first menu item should be left-aligned, the last menu item should be right-aligned.
- The remaining items should be spread optimally on the menu bar.
- The number is varying,so there’s no chance to pre-calculate the optimal widths.
Note that a TABLE won’t work here as well:
- If you center all TDs, the first and the last item aren’t aligned correctly.
- If you left-align and right-align the first resp. the last items, the spacing will be sub-optimal.
Isn’t it strange that there is no obvious way to implement this in a clean way by using HTML and CSS?
Modern Approach - Flexboxes!
In this instance, you would just set the parent element’s
flex and then change the
justify-content property to either
space-around in order to add space between or around the children flexbox items.
justify-content: space-between - ( example here):
justify-content: space-around - (example here):