Having line breaks between <li> s

Question

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

Elements should be next to each other.

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

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

However, if I add \n after each item, the menu items have a gap between them. I understand that this is the intended behavior, but is there a way to turn it off with smart “white space” or something else?

Edit: I cannot use float, it is in CMS with the ability to center list items.

Answer 1

You can avoid rendering problems, but maintain the code as follows:

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

It removes spaces, but it's still easy to edit elements in a text editor if your CMS is not confused with the markup you enter!

Answer 2

Do you have the ability to edit CSS? If so, you can try adjusting the padding / fields to the <li> element. He seems to have a lot of reading effort.

Depending on which browser you use, you may get HTML Tidy http://users.skynet.be/mgueury/mozilla/ , which gives you the option to remove your source, which may be useful enough for debugging

Answer 3

CSS + float is your friend.

Answer 4

HTML is space-independent, so adding line breaks should not have any effect. However, some browser rendering engines do not quite understand this.

What you probably want to do is add

float: left;

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