How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

by

Use text-align:justify on the container, this way it will work no matter how many elements you have in your list (you don’t have to work out % widths for each list item

    #nav {
        text-align: justify;
        min-width: 500px;
    }
    #nav:after {
        content: '';
        display: inline-block;
        width: 100%;
    }
    #nav li {
        display: inline-block;
    }
<ul id="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">BASIC SERVICES</a></li>
    <li><a href="#">OUR STAFF</a></li>
    <li><a href="#">CONTACT US</a></li>
</ul>

FIDDLE

More Related Contents:

  1. Bootstrap 3 collapsed menu doesn’t close on click
  2. Why are button’s discouraged from navigation?
  3. How do I justify a horizontal list?
  4. How can I align text directly beneath an image?
  5. How can I make this background to see full?
  6. How to make an element width: 100% minus padding?
  7. Best way to center a on a page vertically and horizontally? [duplicate]
  8. vertical-align with Bootstrap 3
  9. How to align content of a div to the bottom
  10. With CSS, use “…” for overflowed block of multi-lines
  11. Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
  12. Fix footer to bottom of page
  13. Html/Css Triangle with pseudo elements
  14. Force flex item to span full row width
  15. Removing body margin in CSS
  16. What is quirks mode?
  17. Google Fonts are not rendering on Google Chrome
  18. Adding images with option tag [duplicate]
  19. Text not centered with justify-content: center
  20. Setting a width and height on an A tag
  21. Create a slanted edge to a div [duplicate]
  22. Position sticky on thead
  23. vs. font-weight:bold & vs. font-style:italic
  24. Add border to div increase div width?
  25. CSS Selector “(A or B) and C”?
  26. How to change one element while hovering over another with CSS
  27. How to make CSS Grid items take up remaining space?
  28. How can I make Bootstrap 4 columns all the same height? [duplicate]
  29. Changing image src depending on screen size
  30. Balanced text wrapping in HTML

Leave a Comment