Having line breaks between <li>s

Question

I have a horizontal menu consisting of <li> elements with display: inline.

The elements are supposed to be next to each other seamlessly.

In the source code, I would like to have each li on one line for easier debugging:

<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...

However, if I add a \n after each element, the menu items have a gap between each other. I gather this is the intended behaviour, but is there any way to turn it off using a clever "white-space" setting or something?

Edit: I can't use float, this is in a CMS with the option to center the list items.

Answer 1

CSS+float is your friend.

Answer 2

HTML is whitespace independent - so adding line breaks should have no effect. Some browser's rendering engines don't quite get this right however.

What you probably want to do is add

float: left;

to your li tags to get them next to each other.

Answer 3

Do you have the ability to edit the CSS? If so, you could try adjusting the padding/margins on the <li> element. It does seem to be a lot of effort of readability.

Depending on what browser you are using you can get the HTML Tidy http://users.skynet.be/mgueury/mozilla/, which gives you the option to Tidy up your source, which might be useful enough for debugging

Answer 4

You can avoid the rendering issues but keep the code maintainable like this:

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

It removes the whitespace but it's still easy to edit the items in a text editor, provided your CMS doesn't mess with the markup you enter!