css-float - インライン ブロック間隔のギャップで Haml を使用する

Question

だから私はフロートではなくインラインブロックを使用するときにスペースをなくすことに関する解決策を読みました: display: inline-block extra marginとhttp://css-tricks.com/fighting-the-space-between-inline-block -要素/ .

では、haml を使用していて、次の開始タグと同じ行に終了タグを配置したい場合、ERB に切り替える以外に解決策はありますか?

(いいえ、親コンテナーの css プロパティを台無しにしたくなく、すべての子要素でそれをオーバーライドする必要があります)。

これが壊れます（アンカー間にスペースがあります）。

フロートではなくインラインブロックを使用してそのようなレイアウトを行うことを推奨しているにもかかわらず、特に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>

回避策 (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>

別のもの：

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

Answer 1

私は答えを見つけました：http：//haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_

（これは、このトピックに関する非常に役立つ記事です：http: //designshack.net/articles/css/whats-the-deal-with-display-inline-block/）

実験するCodepenは次のとおりです：http：//cdpn.io/Bjblr

そしてこれはうまくいきました：

アンカーテキストが同じ行にある場合のhtmlは次のとおりです（同じ結果ですが、ソースhtmlが読みにくいです：