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 版本。为了解决您可能遇到的 white-space 问题，我省略了结尾 </li>，这不会以任何方式影响 HTML 的有效性。

ul {
  padding-top: 8px;
  padding-left: 0px;
  margin: 0;
  list-style: none;
  border-top: 2px solid #000000;
  display: block;

}

li {
  width: 50%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 4px;
}

.item {
  margin-bottom: 10px;
}

.item strong,
.item .text {
  display: inline-block;
  vertical-align: top;
}

.item strong {
  width: 40%;
  display: inline-block;
  white-space: nowrap;
}

.item strong::after {
  content: ':';
}

.item .text {
  width: 60%;
  padding: 0;
  margin: 0;
}

<ul>
  <li>
    <div class="item">
      <strong>My Label</strong><p class="text">My text here</p>
    </div>
  <li>
    <div class="item">
      <strong>My Label</strong><p class="text">My text here</p>
    </div>
    <div class="item">
      <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>
    </div>
    <div class="item">
      <strong>My Label</strong><p class="text">My text here</p>
    </div>
</ul>

jsFiddle

使用 inline-block 有时会造成问题，因为 HTML 中的白色 space 成为渲染的一部分。我会为 ul 和 li 使用 flexbox 来解决这个问题。最后，我在 li 的内容周围添加了一些标记，使其也成为 flexbox 父项。

ul {
  padding-top: 8px;
  padding-left: 0px;
  margin: 0;
  list-style: none;
  border-top: 2px solid #000000;
  display: block;
  width: 99%;
  display: flex;
}

li {
  flex: 1 0 50%;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  margin-bottom: 10px;
}

.item strong {
  flex: 4;
  white-space: nowrap;
}

.item strong::after {
  content: ':';
}

.item .text {
  flex: 6;
  padding: 0;
  margin: 0;
}

<ul>
  <li>
    <div class="item">
      <strong>My Label</strong>
      <p class="text">My text here</p>
    </div>
  </li>
  <li>
    <div class="item">
      <strong>My Label</strong>
      <p class="text">My text here</p>
    </div>

    <div class="item">
      <strong>My Label</strong>
      <p class="text">My text here</p>
    </div>
    <div class="item">
      <strong>My Label</strong>
      <p class="text">My text here</p>
    </div>
  </li>
</ul>

jsFiddle

DOMPDF：列表项溢出 50% 宽度

DOMPDF: List items overflow with 50% width

html

css

dompdf

更新