使关闭和打开 div 标签与 HAML 出现在同一行

Question

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

您可以通过将结束 div 标记和尾随开始 div 标记放在同一行来解决此问题，但除此之外，纠正此问题的最佳方法似乎是通过为它们提供绝对定位和负边距。

我可以用 HAML 完成前者吗？最好不要使用整个 div 标记和其中的所有内容，而只是结束和开始标记。

Answer 1

我知道（我的意思是在他们的文档中）可以让您对输出格式进行一些控制的唯一选项是切换器 -t，它可以是 ugly 或默认的 intended。 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 样式的一个众所周知的问题，因为元素被视为字符，所以有该空间是正常的。它有很多技巧，比如在容器上将字体大小设置为 0px，然后在块上恢复它，或者改用 float。

关注这些堆栈以获取有关该主题的更多详细信息：

How to remove the space between inline-block elements?

A Space between Inline-Block List Items