Yesterday I spent quite a lot of time debugging an annoying CSS issue. I wanted to make an horizontal navigation bar so I started using this markup:
<ul>
<li><a href="/section1/">Section 1</a></li>
<li><a href="/section2/">Section 2</a></li>
<li><a href="/section3/">Section 3</a></li>
<li><a href="/section4/">Section 4</a></li>
</ul>
In order to make the list horizontal there are two CSS techniques you can use: 1) float everything or 2) use display: inline. I decided to use option 2) since it is less intrusive and I didn’t want to change the rest of the page layout.
So this is how the CSS looks like:
ul { display: inline; }
li { display: inline; border: 1px solid black; }
My problem was that there was some unwanted space between the list elements that made them difficult to stylish properly. After trying everything on earth to fix it I google for a while until I found the offending thing.
As you make the elements inline whitespace matters and the new line characters in the markup are the ones making the little margin between the list elements. You can fix this problem putting all the elements in a single line but that’s not very readable and it’s quite ugly. So this is how I fix it:
<ul>
<li><a href="/section1/">Section 1</a></li
><li><a href="/section2/">Section 2</a></li
><li><a href="/section3/">Section 3</a></li
><li><a href="/section4/">Section 4</a></li>
</ul>
gracias a esta