css-float – 使用带有内联块间距的Haml

前端之家收集整理的这篇文章主要介绍了css-float – 使用带有内联块间距的Haml前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
因此,当使用内联块而不是浮点数时,我阅读了关于使间距消失的解决方案: display: inline-block extra marginhttp://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>

解决方法

我找到了答案: 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:

猜你在找的CSS相关文章