使用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/ 。

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

（没有，想要混淆父容器的css属性，并且必须在所有子元素中覆盖它）。

这个断点（在锚点之间有间距）。

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

CSS

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

HTML

 < nav> 
< a href =＃>一个< / a> 
< a href =＃>两个< / a> 
< a href =＃>三< / a> 
< / nav> 
  

解决方法（css-tricks one）：

 < ul> 
< li> 
 one< / li>< li> 
两个< / li>< li> 
三个< / li> 
< / ul> 
  

或

 < ul> 
< li> one< / li 
>< li>两个< / li 
>< li> three< / li> 
< / ul> 
  

另一个：

 < ul> 
< li> one< / li><！ -  
  - >< li>两个< / li>< !- 
  - > li>三< / li> 
< / ul> 
  

解决方案

我发现答案： http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_ p>

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

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

>

working：
>

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

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>

解决方案

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:

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