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

编程问答 2022-06-03

问题描述

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

我面临的问题是，几乎每个元素都占用额外的空间，这会破坏布局的大部分（CSS完全没有改变）。在任何浏览器的开发工具中，额外的空间都不会显示为空白/边距/边框/位置。

我发现浮动元素会减少它们之间的空间，因此看起来就像使用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

结果：

enter image description here

顶部：Fr​​eemarker，底部：XSLT

解决方法

您可以将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>

这将用空格字符替换换行符并生成以下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-floatfreemarkerfreemarkerhtmlxsltxslt