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

Question

因此，当我使用内联块而不是浮点数时，我会阅读有关使间距消失的解决方案：display: inline-block extra margin和http://css-tricks.com/fighting-the-space-between-inline-block-elements/。

因此，如果您正在使用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/）

这是一个实验的代码：http://cdpn.io/Bjblr

这有效：

这是html，如果锚文本在同一行（相同的结果，但更难阅读源html：