Question

我最近发现，HTML在空格中做了一个奇怪的事情，其中div标记在不同的行上打开和关闭，每个标记之间的边距大约为4px。

您可以通过将结束div标记和尾部开头div标记放在同一行上来解决此问题，但是否则纠正此问题的最佳方法似乎是通过给予它们来克服它绝对定位和负边际。

我可以用HAML完成前者吗？最好不要使用整个div标记及其中的所有内容，只包括结尾标记。

Answer 1

我知道的唯一选项（我的意思是在他们的文档上）让你对输出格式有一些控制权是切换器-t可以是ugly或默认的意图。 ugly会省略缩进，所以我猜那里没有运气。

这个haml示例的含义：

.container
  .wrapper
    .something-esle
      a neat text here
    .something-esle
      a neat text here

将使用命令haml -t ugly test.haml test.html进行渲染成：

<div class='container'>
<div class='wrapper'>
<div class='something-esle'>
a neat text here
</div>
<div class='something-esle'>
a neat text here
</div>
</div>
</div>

haml test.haml test.html推出的地方：

<div class='container'>
  <div class='wrapper'>
    <div class='something-esle'>
      a neat text here
    </div>
    <div class='something-esle'>
      a neat text here
    </div>
  </div>
</div>

您遇到了什么，是display:inline或display:inline-block样式的一个众所周知的问题，因为该元素被视为char，所以具有该空格是正常的。有很多技巧，比如在容器上将字体大小设置为0px并在块上恢复它或使用float代替。

关注这些主题：

How to remove the space between inline-block elements?

A Space between Inline-Block List Items

关闭和打开div标签与HAML显示在同一行

1 个答案: