css float 减少了 freemarker 中的间距 - 在 xslt 中没有区别

Question

我必须将模板从 XSLT 更改为 Freemarker（最好不要更改 CSS）。

我面临的问题是几乎每个元素都会占用额外的 space，这会破坏大部分布局（CSS 根本没有改变）。额外的 space 在任何浏览器的开发工具中都不会显示为 margin/padding/border/positioning。

我发现浮动元素会减少它们之间的 space，因此它看起来像是在使用 XSLT，但这不是一个选项，因为这些确实影响了数十个元素。在各种类型中，下面只是一个简单的例子。

XSLT/Freemarker 生成的代码是相同的，尽管在 Freemarker 中有换行符，而在 XSLT 中它全部在一行中（我希望这不会导致这样的问题）：

HTML:

<div class="stars text-center">
<i class="icon-star active" aria-hidden="true"></i>
<i class="icon-star active" aria-hidden="true"></i>
<i class="icon-star active" aria-hidden="true"></i>
<i class="icon-star active" aria-hidden="true"></i>
<i class="icon-star" aria-hidden="true"></i>
</div>

CSS:

尽管有明显的文本中心和颜色设置，但没有为图标或父项设置 CSS

结果：

顶部：Freemarker，底部：XSLT

Answer 1

您可以将 compress 指令与 single_line=true 一起使用。

<@compress single_line=true>
    <div class="stars text-center">
        <i class="icon-star active" aria-hidden="true"></i>
        <i class="icon-star active" aria-hidden="true"></i>
        <i class="icon-star active" aria-hidden="true"></i>
        <i class="icon-star active" aria-hidden="true"></i>
        <i class="icon-star" aria-hidden="true"></i>
    </div>
</@compress>

这将用 space 个字符替换换行符并生成以下 HTML:

<div class="stars text-center"> <i class="icon-star active" aria-hidden="true"></i> <i class="icon-star active" aria-hidden="true"></i> <i class="icon-star active" aria-hidden="true"></i> <i class="icon-star active" aria-hidden="true"></i> <i class="icon-star" aria-hidden="true"></i> </div>

css float 减少了 freemarker 中的间距 - 在 xslt 中没有区别

css float reduces spacing in freemarker - in xslt no difference

html

css

xslt

css-float

freemarker