我正在使用 DOMPDF 生成 PDF 發(fā)票?，F(xiàn)在我對某些元素有疑問<li>。元素的寬度為 50%。寬度<ul>為 100%。但<li>元素仍然存在溢出。請參見右圖。這是我當(dāng)前的 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 回答
慕運(yùn)維8079593
TA貢獻(xiàn)1876條經(jīng)驗 獲得超5個贊
更新
由于 DOMPDF 尚不支持 Flexbox，因此我提供了一個inline-block適合您的版本。為了解決您可能遇到的空白問題，我省略了結(jié)束語，這不會以任何方式</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有時會帶來問題，因為空白區(qū)域會成為HTML渲染的一部分。我會使用 flexbox 來解決這個ul問題li。最后，我在 的內(nèi)容周圍添加了一些標(biāo)記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 關(guān)注
- 245 瀏覽
添加回答
舉報
0/150
提交
取消