7

因此,我阅读了有关在使用 inline-block 而不是浮动时使间距消失的解决方案:display: inline-block extra marginhttp://css-tricks.com/fighting-the-space-between-inline-block -元素/

所以如果你在使用haml并且想把结束标签和下一个开始标签放在同一行,除了切换到ERB之外,还有其他解决方案吗?

(不,我不想弄乱父容器的 css 属性,并且必须在所有子元素中覆盖它)。

这会中断(锚之间有间距)。

那么,尽管建议使用 inline-block 而不是浮动来进行此类布局,但浮动似乎仍然是要走的路,尤其是在使用 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技巧一):

<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>
4

1 回答 1

15

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

在此处输入图像描述

在此处输入图像描述

于 2013-01-30T21:30:14.290 回答