How do I *really* justify a horizontal menu in HTML+CSS?

by

The simplest thing to do is to is to force the line to break by inserting an element at the end of the line that will occupy more than the left available space and then hiding it. I’ve accomplished this quite easily with a simple span element like so:

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}
<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>
  <span></span>
</div>

All the junk inside the #menu span selector is (as far as I’ve found) required to please most browsers. It should force the width of the span element to 100%, which should cause a line break since it is considered an inline element due to the display: inline-block rule. inline-block also makes the span possible to block-level style rules like width which causes the element to not fit in line with the menu and thus the menu to line-break.

You of course need to adjust the width of the span to your use case and design, but I hope you get the general idea and can adapt it.

More Related Contents:

  1. How do I use display:flex and justify-content:space-between, where the flex-item gets centered if there is only one of them?
  2. How I change the color of table fonts/ contents with inline CSS [duplicate]
  3. Expand list when mouse click on list
  4. Difference between tag and the tag? [closed]
  5. How to shrink and fit any logo in a fixed box
  6. align checkbox and label inside li
  7. Left column and stacked right column using flexbox CSS [duplicate]
  8. Change div order with CSS depending on device-width
  9. Why does the outer here not completely surround the inner ?
  10. Maintain aspect ratio of div but fill screen width and height in CSS?
  11. HTML/CSS: Making two floating divs the same height
  12. What does appending “?v=1” to CSS and JavaScript URLs in link and script tags do?
  13. How to set the margin or padding as percentage of height of parent container?
  14. CSS: Control space between bullet and
  15. How to make a display in a horizontal row
  16. Browser Caching of CSS files
  17. Flexbox and Internet Explorer 11 (display:flex in ?)
  18. How to change scroll bar position with CSS?
  19. Bootstrap: add margin/padding space between columns
  20. Changing highlight color
  21. Why doesn’t “display: block” & “width: auto” stretch a button to fill the container? [duplicate]
  22. How to change content on hover
  23. How to cut a circular part from an image?
  24. Prevent a child element from overflowing its parent in flexbox [duplicate]
  25. Why isn’t position:sticky with left:0 working inside a scrollable container?
  26. Why do Firefox and Opera ignore max-width inside of display: table-cell?
  27. Why doesn’t width/height work with non positioned pseudo elements?
  28. What is the best way to move an element that’s on the top to the bottom in Responsive design
  29. CSS way to horizontally align table
  30. Change css font-family for separate options in select tag

Leave a Comment