WordPress.org

Ready to get started?Download WordPress

Forums

How to output menu li items without spaces? (10 posts)

  1. muudles1
    Member
    Posted 1 year ago #

    Hi, when I use wp_nav_menu, it generates the codes into

    <ul>
        <li>menu item 1</li>
        <li>menu item 2</li>
        <li>menu item 3</li>
        <li>menu item 4</li>
    </ul>

    I want it to output

    <ul>
        <li>menu item 1</li><li>menu item 2</li><li>menu item 3</li><li>menu item 4</li>
    </ul>

    Does anyone know how I can do that?

  2. acrane
    Member
    Posted 1 year ago #

    There is no difference in the code above. If you're talking about styling, use your css file.

  3. Tracey
    Member
    Posted 1 year ago #

    You will need to use your css file to make this work. For example:

    .menu ul li {float:left;}
    or
    .menu ul li {display:inline;}

    If you need more help with this try here http://www.w3schools.com/css/css_navbar.asp

  4. muudles1
    Member
    Posted 1 year ago #

    There actually is a difference in the code. I've stopped using floating elements for many years because thats an unstable css technique, and I strongly urge you all to stop floating and use display: inline-block instead.

    But I digress.

    So there is no way to output the li items right next to each other?

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, it's a question of the CSS you use. The appearance of the HTML code itself is irrelevant.

  6. muudles1
    Member
    Posted 1 year ago #

    No its not a question of CSS because if you dont close the spaces between elements, it'll create a gap between inline-block elements.

  7. acrane
    Member
    Posted 1 year ago #

    No, muudles1, it won't. Not unless your CSS file tells it to.

    But I digress.

  8. esmi
    Forum Moderator
    Posted 1 year ago #

    I've stopped using floating elements for many years because thats an unstable css technique

    Uh!? There's nothing unstable about it. And white space between markup elements is ignored by the web browser.

  9. muudles1
    Member
    Posted 1 year ago #

  10. oacdesigns
    Member
    Posted 1 year ago #

    I think I found a workaround solution to your problem, at least it solves it in the design I'm currently working on.
    Set a negative left and right margin to the
    <li> elements.
    I've found the -0.125em will close the space.

    Here's a jsfiddle displaying it
    http://jsfiddle.net/DigitalBiscuits/ftgfD/

Topic Closed

This topic has been closed to new replies.

About this Topic