使用Haml和inline-block间隙 [英] Using Haml with the inline-block spacing gaps

问题描述

所以我阅读关于使用inline-block而不是浮动的间距消失的解决方案： display：inline-block extra margin and http：// css -tricks.com/fighting-the-space-between-inline-block-elements/ 。

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/.

因此，如果您使用haml并希望投放与下一个开始标记在同一行上的结束标记是否有一个解决方案，除了切换到ERB？

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?

（不，我不想乱父容器的css属性，并且必须在所有子元素中覆盖它）。

(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).

这是真的，尽管使用inline-block而不是浮动来做这样的布局的建议，似乎浮动仍然是要走，特别是当使用haml？

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>

解决方法（css-tricks one）：

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>

另一个：

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

推荐答案

我找到了答案： http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_

（这是一篇关于这个主题的超级实用文章： http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ ）

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

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

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

>

>

这个工作：

And this worked:

>

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

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

这篇关于使用Haml和inline-block间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！