我正在使用 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%;}有什么我错过的或已知的错误吗？
1 回答
慕运维8079593
TA贡献1876条经验 获得超5个赞
更新
由于 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>
使用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>
- 1 回答
- 0 关注
- 111 浏览
添加回答
举报
0/150
提交
取消