使用具有内联块间隔间隙的Haml

Question

So I read the solutions regarding making the spacing go away when using inline-block as opposed to floats: display: inline-block extra margin and http://css-tricks.com/fighting-the-space-between-inline-block-elements/ .

So if you're using haml and want to put the closing tag on the same line as the next opening tag, is there is a solution besides switching to ERB?

(and no, I don't want to mess with a css property of the parent container and have to override that in all the child elements).

This breaks (has spacing between the anchors).

So is it true that in spite of the recommendations to do such layouts using inline-block as opposed to floats, it seems that floats are still the way to go, especially when using haml?

CSS

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

HTML

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

Workaround (css-tricks one):

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

or

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

another one:

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

Answer 1

I found the answer: http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_

(this is a super useful article on the topic: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ )

Here's a codepen to experiment: http://cdpn.io/Bjblr

And this worked:

Here's the html if the anchor text is on the same line (same result, but harder to read source html: