[snip]
Certainly there is an issue of white space in lists, where list items
are styled to be horizontal (as in many menus):
[snip]
Modern browsers could use word-spacing.
IE8 +
The following set the word-spacing to -1em and uses margin-left on the li +
li to set the space between them.
http://www.w3.org/TR/css3-text/#word-spacing
.yankee {
display: block;
margin: 0;
padding: 0;
text-align: center;
word-spacing: -1em;
}
.yankee > li {
background-color: rgb(255, 165, 0);
display: inline;
margin: 0;
padding: 1px;
/* word-spacing is inherited reset to normal */
white-space: nowrap;
word-spacing: normal;
}
.yankee > li + li {
/* set space between li */
margin-left: 1px;
}
.yankee,
.yankee > li {
list-style: none;
}
<ul class=yankee>
<li><a href="example.html">Homepage</a></li>
<li><a href="example.html">Services</a></li>
<li><a href="example.html">Protection</a></li>
<li><a href="example.html">Products</a></li>
<li><a href="example.html">Calculators</a></li>
<li><a href="example.html">Tutorials</a></li>
<li><a href="example.html">Links</a></li>
<li><a href="example.html">FAQ</a></li>
<li><a href="example.html">Downloads</a></li>
<li><a href="example.html">Help</a></li>
<li><a href="example.html">Contact Us</a></li>
</ul>