因此,当使用内联块而不是浮点数时,我阅读了关于使间距消失的解决方案:
display: inline-block extra margin和
http://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>
<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:
原文地址:https://www.jb51.cc/css/215511.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。