DOMPDF：列表项溢出 50% 宽度

Question

我正在使用 DOMPDF 生成 PDF 发票。现在我对某些元素有疑问<li>。元素的宽度为 50%。宽度<ul>为 100%。

但<li>元素仍然存在溢出。请参见右图。

这是我当前的 CSS 代码：

ul {padding-top: 8px; padding-left:0px; margin: 0; list-style: none; border-top: 2px solid #000000; display: block; width: 99%;}
ul li {display: inline-block; width: 50%; margin-bottom: 4px;}
ul strong {display: inline-block; width: 40%;}

有什么我错过的或已知的错误吗？

Answer 1

更新由于 DOMPDF 尚不支持 Flexbox，因此我提供了一个inline-block适合您的版本。为了解决您可能遇到的空白问题，我省略了结束语，这不会以任何方式</li>影响 的有效性。HTMLul {&nbsp; padding-top: 8px;&nbsp; padding-left: 0px;&nbsp; margin: 0;&nbsp; list-style: none;&nbsp; border-top: 2px solid #000000;&nbsp; display: block;}li {&nbsp; width: 50%;&nbsp; display: inline-block;&nbsp; vertical-align: top;&nbsp; margin-bottom: 4px;}.item {&nbsp; margin-bottom: 10px;}.item strong,.item .text {&nbsp; display: inline-block;&nbsp; vertical-align: top;}.item strong {&nbsp; width: 40%;&nbsp; display: inline-block;&nbsp; white-space: nowrap;}.item strong::after {&nbsp; content: ':';}.item .text {&nbsp; width: 60%;&nbsp; padding: 0;&nbsp; margin: 0;}<ul>&nbsp; <li>&nbsp; &nbsp; <div class="item">&nbsp; &nbsp; &nbsp; <strong>My Label</strong><p class="text">My text here</p>&nbsp; &nbsp; </div>&nbsp; <li>&nbsp; &nbsp; <div class="item">&nbsp; &nbsp; &nbsp; <strong>My Label</strong><p class="text">My text here</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="item">&nbsp; &nbsp; &nbsp; <strong>My Label</strong><p class="text">My long text here My long text here My long text here My long text here My long text here</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="item">&nbsp; &nbsp; &nbsp; <strong>My Label</strong><p class="text">My text here</p>&nbsp; &nbsp; </div></ul>jsFiddle使用inline-block有时会带来问题，因为空白区域会成为HTML渲染的一部分。我会使用 flexbox 来解决这个ul问题li。最后，我在 的内容周围添加了一些标记li，使其也成为 Flexbox 父级。ul {&nbsp; padding-top: 8px;&nbsp; padding-left: 0px;&nbsp; margin: 0;&nbsp; list-style: none;&nbsp; border-top: 2px solid #000000;&nbsp; display: block;&nbsp; width: 99%;&nbsp; display: flex;}li {&nbsp; flex: 1 0 50%;&nbsp; margin-bottom: 4px;&nbsp; display: flex;&nbsp; flex-direction: column;}.item {&nbsp; display: flex;&nbsp; margin-bottom: 10px;}.item strong {&nbsp; flex: 4;&nbsp; white-space: nowrap;}.item strong::after {&nbsp; content: ':';}.item .text {&nbsp; flex: 6;&nbsp; padding: 0;&nbsp; margin: 0;}<ul>&nbsp; <li>&nbsp; &nbsp; <div class="item">&nbsp; &nbsp; &nbsp; <strong>My Label</strong>&nbsp; &nbsp; &nbsp; <p class="text">My text here</p>&nbsp; &nbsp; </div>&nbsp; </li>&nbsp; <li>&nbsp; &nbsp; <div class="item">&nbsp; &nbsp; &nbsp; <strong>My Label</strong>&nbsp; &nbsp; &nbsp; <p class="text">My text here</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="item">&nbsp; &nbsp; &nbsp; <strong>My Label</strong>&nbsp; &nbsp; &nbsp; <p class="text">My text here</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="item">&nbsp; &nbsp; &nbsp; <strong>My Label</strong>&nbsp; &nbsp; &nbsp; <p class="text">My text here</p>&nbsp; &nbsp; </div>&nbsp; </li></ul>