CSS reasonable menu does not work without line breaks between <li>

Question

I am developing a custom Wordpress template for some friends and want a horizontally based top menu. Everything will be fine, except that wp_page_menu displays the list items on one line, which (after LOT! Smoothing the head) seems to break the formatting and removes all the space between the items. For example, the following outputs 1, 2, and 3 are spaced and then 456 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/">1</a></li> <li><a href="http://localhost/">2</a></li> <li><a href="http://localhost/">3</a></li> <li><a href="http://localhost/">4</a></li><li><a href="http://localhost/">5</a></li><li><a href="http://localhost/">6</a></li> </ul> <span></span> </div> 

I already have a custom function editing the output from wp_page_menu to add a range after ul, so I think the easiest task is to extend this function to put line breaks, but if someone got other ideas or can tell me why this happens (especially this!), which would be great.

EDIT:

This is fixed by adding a function that inserts a space in html (the code is below if someone is interested now or if someone encounters this in the future). It seems that was all that was needed! It would be interesting to know if anyone can tell me why this is necessary.

 // 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

To answer your question how xHTML works. If you have the following:

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

This will display as

testtest1

And if you have the following:

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

This will display as

test test1

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

You had a header with three images in a row, but when you tried to do this:

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

This will insert a space (   ) after each image, while there will be none in the line.

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

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

Hope this helped.

Answer 2

instead of displaying: inline, try putting your lis to the left. it is possible:

not:

 .menu * { display: inline; } 

instead

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

I suppose I'm a little decorated with other things, but give it a try!

Answer 3

If I understand correctly, then what you really need is a tabular layout. Try adding this to css:

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

Answer 4

You can just completely remove the li label and just make them div with the same class name.