*ngfor阵列中的空字符串引起奇怪的放置问题(与数组中的非空字符串相对)

Question

实时演示链接说一千个字：https：//stackblitz.com/edit/angular-5vwspd

您可以看到，前2天是尴尬的地方。

---

我正在创建一个日历组件，并显示日常数字(例如1,2，...，31(，我有一个days数组。但是，为了使1出现在右下的工作日(例如TU(下，我需要用空字符串添加days。

但是，这些空字符串引起了奇怪的位置问题。空字符串的元素比其他元素更高。

例如，在我的.ts文件中： days = ['','','',...,'30','31'];

在我的.html文件中：

<li *ngFor="let day of days">
    <div class="dayNumber">
       {{day}}
    </div>
 </li>

Answer 1

div元素的垂直对齐是 vertical-align: baseline。基线基于文本内容(请参阅此帖子(，但是，当元素为空时，它似乎位于元素的底部。

当字符串为空或仅包含空格时，您可以通过显示不可破的空间来避免问题：

{{ day.trim() || ' ' }}

有关演示，请参见此stackblitz。

---

作为替代方案，您可以为.days li元素指定垂直对齐。除了baseline以外，任何对齐值都将执行，这是导致问题的默认值。

.days li {
  ...
  vertical-align: middle;
}

有关演示，请参见此Stackblitz。感谢Codequiet的建议。