HTML / CSS - removing spaces from line breaks in code for LI

Question

Hey, is there a way to make the browser ignore line breaks in the source?

<div id="navbar"> <div id="navbar-container"> <ul> <li>HOME</li> <li>TUTORIALS</li> <li>BLOG</li> <li>FORUMS</li> <li>LINKS</li> <li>&nbsp;</li> </ul> </div> </div> #navbar { background:#FFF; width:940px; margin:auto; border-radius: 10px 10px; -webkit-box-shadow: 5px 5px 10px #888; } #navbar-container { margin:auto; } #navbar-container ul { list-style:none; text-align:center; display:block; width:auto; padding:0; margin:0; } #navbar-container li{ list-style:none; border-left:3px solid black; display:inline-block; font-family:"Arial", sans-serif; font-size:2em; padding:0 7px 0 10px; margin:0; white-space:nowrap; } #navbar-container li:hover{ color:#FFF; background:#000; border-left:3px solid black; display:inline-block; font-family:"Arial", sans-serif; font-size:2em; margin:0; padding:0 7px 0 10px; } 

It puts a small space between each LI, I configured it, and then lined up horizontally, I could just remove line breaks in the source, but id prefers not to.

Answer 1

You can swim them (either left or right ), or you can comment on the spaces:

 <ul> <li>...</li><!-- --><li>...</li> </ul> 

Or just leave the tags open 'until the next line.

 <ul> <li>...</li ><li>...</li ><li>...</li> </ul> 

Answer 2

IE seems to do this as a hold since the days when the list items did not have closing tags. A common way is to close> on the next line, i.e.

 <ul> <li>HOME</li ><li>TUTORIALS</li ><li>BLOG</li >etc... 

Answer 3

All browsers should completely ignore spaces. Is there a specific browser giving you problems?

Try:

 li { margin: 0; padding: 0 } 

Answer 4

I was wondering the same thing, and what worked for me was:

 li { display: table-cell; } 

All breaks are ignored, and now my menu buttons are next to each other.

You can see a live example here on my music website: http://www.yanike.tk

I used CSS Sprite in my UL LI for my navigation menu (home, multimedia, ...).