在我的 angular 應用程式中，我面臨一個問題，當我將資料更改為一個大串列時（一些 css 也更改了），元素之間的空間變得更小。
我做了一個類似條件的問題的小例子
stackblitz 示例 -此處
嘗試向 items 陣列添加更多內容 - 超過 8 個，您將看到元素底部邊距的變化。
html -
<div class="container" [class.large-list]="items?.length > 8">
<div *ngFor="let item of items" class="item">
<p>{{ item }}</p>
</div>
</div>
css -
.container .item {
display: inline-block;
width: 20%;
border: solid 1px red;
margin: 20px;
}
.container.large-list .item{
display: block;
width: unset;
}
p {
margin: 0;
}
.ts 檔案中的陣列
items = [
'Some Item',
'Some Item',
'Some Item',
'Some Item',
'Some Item',
'Some Item',
'Some Item',
'Some Item',
];
uj5u.com熱心網友回復：
行內塊元素不會折疊它們的邊距 - 請參閱此 Q：
行內塊元素的邊距崩潰？
因此，在第一種情況下，專案被單獨的 20 像素邊距包圍，這使得與下方專案的距離為 40 像素，因為邊距不會“合并”（折疊）
在第二種情況下（大專案），邊距確實會折疊，因為專案現在顯示為：塊 - 所以有 20 像素的間隙
答案似乎是您需要為大專案 css 規則設定 margin-bottom: 40px，或者找到一個替換 inline-block (flex?)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/361305.html
上一篇：如何使用CSS對齊文本和圖表
下一篇：洗掉div中專案之間的空格