Javascript Lightning生成的html列表水平对齐问题
我最近接手了另一个开发人员启动的一个小项目,该项目的核心内容之一是在日历上显示信息。此日历是在salesforce lightning组件中使用Javascript创建的,JS创建一个无序列表,然后用列表项填充该列表,作为日期。问题就出在这里,每当一天内显示链接等信息时,列表项都会移动,以便每天的最后一行与前一天对齐,如下所示: 中断日历日: 每个列表项都包含一个段落标记,其中包含天数,如果适用,还包含一个链接,每个链接之间用换行符分隔 以下是lightning组件中的javascript:Javascript Lightning生成的html列表水平对齐问题,javascript,html,css,salesforce,salesforce-lightning,Javascript,Html,Css,Salesforce,Salesforce Lightning,我最近接手了另一个开发人员启动的一个小项目,该项目的核心内容之一是在日历上显示信息。此日历是在salesforce lightning组件中使用Javascript创建的,JS创建一个无序列表,然后用列表项填充该列表,作为日期。问题就出在这里,每当一天内显示链接等信息时,列表项都会移动,以便每天的最后一行与前一天对齐,如下所示: 中断日历日: 每个列表项都包含一个段落标记,其中包含天数,如果适用,还包含一个链接,每个链接之间用换行符分隔 以下是lightning组件中的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);
var number=DayNumber(i+1);
//对照事件日期检查日期
对于(var n=0;n”+title.innerHTML;
}
}
日。儿童(编号);
它们以内联块显示,并使用边框创建日历的幻觉。是否有任何方法可以改变或覆盖此列表对齐其项目的方式?因此,问题是由无序列表如何处理内联对齐引起的。我修改了每日css元素以包含overflow:auto,这是针对文本引起的垂直对齐问题进行的调整