如何在 pdf wktmltopdf 中设置宽度：最大内容

Question

我的 pdf 中有一个动态索引，其设计如下
前两行很好，它们彼此相邻，但最后一行不会内联放置

但是当我尝试在左侧文本上添加宽度：最大内容时，它将全部内联，这将不起作用，我研究了周围并发现最大内容在pdf中不起作用，根本不设置宽度不起作用或者，我该如何做才能使其全部内联

我使用的html是：

<div class="relative w-full clear">
    <p class="bg-blue relative float-left pr-10px z-20">{{ $product->name }}</p>
    <p class="bg-blue relative float-right -mr-10px pl-10px z-20" style="width: 100px">PAGE 12 / 13</p>
    <hr class="z-10 absolute w-full">
</div>

Answer 1

我很难适应你的顺风风格。这些样式是定制的，如果您想展示较小细节的自我限制演示，那么一切都会变得更加困难。

我选择在这里使用普通CSS。

特别是我采用了 Flexbox 方法。

按原样包含它或进行轻微修改并不需要付出巨大的努力。

每行由 3 个元素组成，其中中间的填充符只是一个容器，用于容纳

<hr>

，占据产品名称和页码之间的整个空间。

.line {
  display: flex;
  width: 100%;
}

.product, .pagen {  
  text-align: center;    
}

.grow {
  flex-grow: 1;
  padding: 0 .8em;  
}

<div class="line">
    <div class="product">{{ $product->name }}</div>
    <div class="grow"><hr></div>
    <div class="pagen">PAGE 12 / 13</div>
</div>
<div class="line">
    <div class="product">{{ $product->name }}</div>
    <div class="grow"><hr></div>
    <div class="pagen">PAGE 12 / 13</div>
</div>
<div class="line">
    <div class="product">{{ $product->name }}</div>
    <div class="grow"><hr></div>
    <div class="pagen">PAGE 12 / 13</div>
</div>