See how nice it wraps, that is built into floats, how the html can be regular with little thought to ensure no gaps or line breaks between list item markup, all the work being done by simple css. The white horizontal gaps between the list items are right borders to the list elements, the vertical gaps for when wrapped supplied by simple top margin.
This display: inline; list also wraps, this being due to the html, not the css. The white gaps between the list items are just spaces due to the hard wraps in the html markup itself. To remove the spaces, you can adopt markup like:
<li><a href="example.html">Homepage</a></li><li><a href="example.html">Services</a></li>...
Or, to preserve readability in the source, the equivalent:
<li><a href="example.html">Homepage</a></li
><li><a href="example.html">Services</a></li>
...