Best way to manage whitespace between inline list items

by

Several options here, first I’ll give you my normal practice when creating inline lists:

<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

Then the CSS to make it function as you intend:

#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

Obviously I left out the hover and active sets, but this creates a nice block level navigation, and is a very common method for doing this while still keeping with standards. /* remember to tweak to your liking, add color to the background, et cetera */

If you would like to keep it just with text and just inline, no block elements I believe you’d want to add:

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

Realizing you would like to REMOVE the whitespace, just adjust the margins/padding accordingly.

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. Removing ul indentation with CSS
  10. HTML + CSS: Ordered List without the Period?
  11. How do I justify a horizontal list?
  12. Change the color of a bullet in a html list?
  13. HTML + CSS: Numbered list with numbers inside of circles
  14. HTML ordered list 1.1, 1.2 (Nested counters and scope) not working
  15. How to center an unordered list?
  16. HTML list-style-type dash
  17. Is it possible to specify a starting number for an ordered list?
  18. How can I prefix ordered list item numbers with a static string using CSS?
  19. Can you style ordered list numbers?
  20. Adding text before list
  21. Text in my heading should be top not bottom [closed]
  22. How do you keep parents of floated elements from collapsing? [duplicate]
  23. How to deal with page breaks when printing a large HTML table
  24. How do I change the color of radio buttons?
  25. How can I draw vertical text with CSS cross-browser?
  26. Is clearfix deprecated?
  27. Pure CSS multi-level drop-down menu
  28. Make link in table cell fill the entire row height
  29. Why is text wrapping around a floating element instead of going belows like another div?
  30. Prevent a centered layout from shifting its position when scrollbar appears

Leave a Comment