Lightning 生成的 html 列表水平对齐问题答案

【问题标题】：Lightning generated html list horizontal alignment issueLightning 生成的 html 列表水平对齐问题
【发布时间】：2018-12-08 21:23:22
【问题描述】：

我最近接手了一个由另一位开发人员启动的小项目，该项目的核心部分之一是在日历上显示信息。此日历是在 salesforce 闪电组件中使用 Javascript 创建的，JS 创建一个无序列表，然后用作为日期的列表项填充该列表。问题就在这里，每当一天内显示链接等信息时，列表项就会移动，以便每天的最后一行与前一天对齐，如下所示：

中断的日历天数：

每个列表项都包含一个段落标记，其中包含日期编号和一个链接（如果适用），每个链接都由换行符分隔。

这是闪电组件中的 javascript：

var number = DayNumber(i + 1);
// Check Date against Event Dates
for (var n = 0; n < calendar.Model.length; n++) {
  var evDate = calendar.Model[n].Date;
  var toDate = new Date(calendar.Selected.Year, calendar.Selected.Month, (i + 1));
  if (evDate.getTime() == toDate.getTime()) {
    number.className += " eventday";
    var title = document.createElement('span');
    title.className += "cld-title";
    if (typeof calendar.Model[n].Link == 'function' || calendar.Options.EventClick) {
      var a = document.createElement('a');
      a.setAttribute('href', '#');
      a.innerHTML += calendar.Model[n].Title;
      if (calendar.Options.EventClick) {
        var z = calendar.Model[n].Link;
        if (typeof calendar.Model[n].Link != 'string') {
          a.addEventListener('click', calendar.Options.EventClick.bind.apply(calendar.Options.EventClick, [null].concat(z)));
          if (calendar.Options.EventTargetWholeDay) {
            day.className += " clickable";
            day.addEventListener('click', calendar.Options.EventClick.bind.apply(calendar.Options.EventClick, [null].concat(z)));
          }
        } else {
          a.addEventListener('click', calendar.Options.EventClick.bind(null, z));
          if (calendar.Options.EventTargetWholeDay) {
            day.className += " clickable";
            day.addEventListener('click', calendar.Options.EventClick.bind(null, z));
          }
        }
      } else {
        a.addEventListener('click', calendar.Model[n].Link);
        if (calendar.Options.EventTargetWholeDay) {
          day.className += " clickable";
          day.addEventListener('click', calendar.Model[n].Link);
        }
      }
      title.appendChild(a);
    } else {
      title.innerHTML += '<a href="' + calendar.Model[n].Link + '">' + calendar.Model[n].Title + '</a>';
    }
    number.innerHTML += "</br>" + title.innerHTML;
  }
}
day.appendChild(number);

它们以行内块显示，并使用边框来创建日历的错觉。有没有办法改变或覆盖这个列表对齐它的项目的方式？

【问题讨论】：

标签： javascript html css salesforce salesforce-lightning

【解决方案1】：

所以问题是由无序列表如何处理内联对齐引起的。我修改了当天元素的 css 以包括溢出：自动，这针对由文本引起的垂直对齐问题进行了调整。

【讨论】：