How do I justify a horizontal list?

by

Modern Approach – CSS3 Flexboxes

Now that we have CSS3 flexboxes, you no longer need to resort to tricks and workarounds in order to make this work. Fortunately, browser support has come a long way, and most of us can start using flexboxes.

Just set the parent element’s display to flex and then change the justify-content property to either space-between or space-around in order to add space between/around the children flexbox items. Then add additional vendor prefixes for more browser support.

Using justify-content: space-between – (example here):

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-between;
}
<ul class="menu">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>

Using justify-content: space-around – (example here):

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-around;
}
<ul class="menu">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>

More Related Contents:

  1. Does UL have default margin or padding [duplicate]
  2. How to keep indent for second line in ordered lists via CSS?
  3. Li item on two lines. Second line has no margin
  4. How to display an unordered list in two columns?
  5. How can you customize the numbers in an ordered list?
  6. CSS: Control space between bullet and
  7. How to make a display in a horizontal row
  8. Responsive Separator for Horizontal List
  9. How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container
  10. Removing ul indentation with CSS
  11. HTML + CSS: Ordered List without the Period?
  12. Best way to manage whitespace between inline list items
  13. Change the color of a bullet in a html list?
  14. HTML + CSS: Numbered list with numbers inside of circles
  15. HTML ordered list 1.1, 1.2 (Nested counters and scope) not working
  16. How to center an unordered list?
  17. HTML list-style-type dash
  18. Is it possible to specify a starting number for an ordered list?
  19. How can I align text directly beneath an image?
  20. How can I prefix ordered list item numbers with a static string using CSS?
  21. Can you style ordered list numbers?
  22. Adding text before list
  23. Why are flex items not wrapping?
  24. Absolute positioning inside absolute position
  25. img tag displays wrong orientation
  26. How To Isolate a div from public CSS styles?
  27. Bootstrap 4 – Sticky footer – Dynamic footer height
  28. Center HTML Input Text Field Placeholder
  29. Bootstrap navbar: nothing is displayed on smaller devices
  30. Will targeting IE8 with conditional comments work?

Leave a Comment