所以我阅读了有关在使用内联 block 而不是 float 时消除间距的解决方案:display: inline-block extra margin和 http://css-tricks.com/fighting-the-space-between-inline-block-elements/ .
因此,如果您使用的是 haml 并希望将结束标记与下一个开始标记放在同一行,那么除了切换到 ERB 之外还有其他解决方案吗?
(不,我不想弄乱父容器的 css 属性而不得不在所有子元素中覆盖它)。
这会中断( anchor 之间有间距)。
尽管建议使用内联 block 而不是 float 进行此类布局,但 float 似乎仍然是可行的方法,尤其是在使用 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>
最佳答案
我找到了答案:http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_
(这是一篇关于该主题的 super 有用的文章:http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/)
这是一个用于实验的代码笔:http://cdpn.io/Bjblr
这奏效了:
如果 anchor 文本在同一行,则为 html(结果相同,但源 html 更难阅读:
关于css-float - 使用具有行内 block 间距的 Haml,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14612980/