Using Haml with the inline-block spacing gaps

问题

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>

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

another one:

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

回答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:

来源：https://stackoverflow.com/questions/14612980/using-haml-with-the-inline-block-spacing-gaps

标签

css-float

haml

css