Justified CSS menu not working without line breaks between <li>

Question

Hi everyone,

I'm designing a custom wordpress template for some friends, and want a horizontally justified top menu. All would be fine, except that wp_page_menu outputs the list elements all in one line, which (after a LOT! of head-scratching) appears to break the formatting and removes all space between the elements. For example, the following outputs 1, 2 and 3 spaced out and then 456 all together. (Tested in Safari, Firefox and Chrome, all on mac.)

<style>

.menu {
    text-align: justify;
    width: 700px;
    margin: 10px;
}

.menu * {
    display: inline;
}

.menu span {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 0;
}

</style>

<div class="menu">
    <ul>
        <li><a href="http://localhost/"&gt;1&lt;/a&gt;&lt;/li&gt;
        <li><a href="http://localhost/"&gt;2&lt;/a&gt;&lt;/li&gt;
        <li><a href="http://localhost/"&gt;3&lt;/a&gt;&lt;/li&gt;
        <li><a href="http://localhost/"&gt;4&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://localhost/"&gt;5&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://localhost/"&gt;6&lt;/a&gt;&lt;/li&gt;
    </ul>
    <span></span>
</div>

I've already got a custom function editing the output from wp_page_menu to add the span after the ul, so I guess the easiest thing to do would be to extend that function to put the line breaks in as well, but if anyone's got other ideas, or can tell me why this is happening (especially that!) that would be great.

EDIT:

Have fixed it now by adding a function that inserts a space to the html (code below if anyone's interested for now or if someone comes across this in the future). Seems that was all that was necessary! Would still be interested to hear if anyone can tell me why this is needed.

// Add a space after the </li> in wp_page_menu to allow justification of the menu
function add_break($break) {
    return preg_replace('/<\/li>/', '</li> ', $break, -1);
}
add_filter('wp_page_menu','add_break');

Answer 1

instead of display:inline, try floating your lis left. then maybe:
no:

.menu * {
   display: inline;
}

instead

.menu li{
   float:left;
   padding:0 5px;
   list-style:none;
}

I guess i kind of embelished with the other stuff but give it a try!

Answer 2

If I understand it correctly - what you really need is a tabular layout. Try adding this to the css:

.menu { display: table; }
.menu ul { display:table-row; }
.menu li { display:table-cell; }

Answer 3

To answer your question, that's how xHTML works. If you have the following:

<a href="#">test</a><a href="#">test1</a>

That would show up as

testtest1

And if you have the following:

<a href="#">test</a> <a href="#">test1</a>

That would show up as

test test1

Now, the same logic works for <li> elements, as well as various other selectors such as <img> selectors.

Have you have had a header with three images in a line, but when you tried to do this:

 <img src="#" />
 <img src="#" />
 <img src="#" />

That will insert a space ( ) after each image, whereas having them in line would not.

Your function accomplishes exactly what you wanted. You could've done it using Javascript or CSS as well, but your solution is better. Just in case you are curious, here is how to do it with CSS:

.menu li:before {
    content:' ';
}

Hope that helped.

Answer 4

You could just ditch the li tag altogether and just make them div's with the same class name.