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>影响 的有效性。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渲染的一部分。我会使用 flexbox 来解决这个ul问题li。最后，我在 的内容周围添加了一些标记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>