iText7.Html2pdf内联文本左右对齐失效问题求助

浏览器中HTML渲染效果：

iText7生成的PDF渲染效果：

我的原始HTML代码：

<li id="row1">
    <span class="left bold">left-aligned text</span>
    <span class="right bold">right-aligned text</span>
</li>

原始CSS代码：

#row1 {
  position:relative;
  max-width: 6.8in;
}

.left {
  position: absolute;
}

.right {
  position: absolute;
  right: 0;
}

兼容方案 #

由于iText7对position: absolute的多元素层叠处理支持有限，推荐改用以下两种iText7更好支持的布局方式实现左右对齐：

方案1：Flex布局（推荐）

修改CSS为：

#row1 {
  max-width: 6.8in;
  display: flex;
  justify-content: space-between;
}

.bold {
  font-weight: bold;
}

HTML结构无需改动，Flex布局是iText7支持较完善的现代布局方式，能在浏览器和PDF中一致实现左右两端对齐效果。

方案2：浮动布局

修改CSS为：

#row1 {
  max-width: 6.8in;
  overflow: hidden; /* 清除浮动，确保容器高度正确 */
}

.left {
  float: left;
}

.right {
  float: right;
}

.bold {
  font-weight: bold;
}

浮动是传统布局方式，iText7对其兼容性良好，同样能实现两端对齐且无重叠问题。

原因说明 #

原代码中使用的绝对定位在浏览器中会基于相对定位容器分别定位左右元素，但iText7的HTML转换器对同容器内多个绝对定位元素的位置计算逻辑与浏览器不一致，导致元素层叠覆盖。改用Flex或浮动布局则是利用iText7支持更完善的CSS特性，实现相同的视觉效果同时保证跨环境兼容性。

内容的提问来源于stack exchange，提问作者futium