2

I'm using DOMPDF to generate PDF invoices. Now I have a problem with some <li> elements. The elements are 50% in width. The <ul> has a width of 100%.

But the <li> elements still have an overflow. See image on the right. enter image description here

This is my current CSS code:

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%;}

Is there anything I've missed or a known bug?

4

1 回答 1

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成为渲染的一部分。我会使用 flexboxul和lis 来解决这个问题。最后，我在 的内容周围添加了一些标记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

于 2020-03-10T19:35:32.583 回答