SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Navigation bar spacers and gaps

    Hi,

    I have a ul as a navigation bar.

    I ahve it set out horizontal using display: inline-block.

    Two issues I could do with some help with:

    1.) How do I remove the gap between each li?

    2.) If I want to add " | " after each li except the last one how would I do that?

    I have the following to add the pipe in between but not sure how to get rid of the last one?

    Code CSS:
    #nav li:after
    {
    content: '|';
    }

    Thanks

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rctneil View Post
    I have a ul as a navigation bar.
    ...
    1.) How do I remove the gap between each li?

    2.) If I want to add " | " after each li except the last one how would I do that?

    I have the following to add the pipe in between but not sure how to get rid of the last one?

    Code CSS:
    #nav li:after
    {
    content: '|';
    }
    1. Without seeing what you've got so far, it's hard to be sure, but it sounds like you need to reduce padding and/or margins on the list item and/or the list itself.

    2. If you want a cross-browser solution, the easiest one is to just put an ID on the last item and then put :after {content:none;} on that ID.

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.sitepoint.com/forums/css-...st-706576.html

    the previous problem:
    making a block element an inline-block element was causing a right whitespace to appear. that was from the whitespace in the actual markup. so, no whitespace between the end tag and the start tag of between elements fixed it (...</div><div>..., no new line or spaces there).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •