Javascript 如何修复React组件中列表样式明细表的渲染

我正在尝试为React应用程序创建一个“简单”的事件日程表。我用它来获得灵感。并不是每天都有活动，有些日子的活动比其他日子多

我终于能够为每个日期创建一个“日期”标题（在左侧），而无需重复，然后在右侧为当天的所有事件显示一个时间块。但是，我无法使其正确渲染。我已经尝试了所有我能想到的关于填充、边距、对齐等方面的方法。我还尝试了将东西移入和移出不同的div，看看这是否是问题所在

我不知道如何让这个问题通过JSX和React组件显示在Codepen或JSFIDLE中。不管怎样，我都复制了代码——希望它足以传达这个问题。这是主要的相关章节：

  render() {
this.restructureData();
return (
  <div>
    <br></br>
    <h1>Availability</h1>
    {/* {this.renderTimeslots()} */}
    <div className="schedule-div">
      <ul className="main">{this.betterRenderTimeslots()}</ul>
    </div>
  </div>
);

  betterRenderTimeslots = () => {
const newObject = this.restructureData();
let allDays = [];
for (let date in newObject) {
  let onThisDay = (
    <>
      <h3>{date}</h3>
      <li className="events">
        <ul className="events-detail">
          {newObject[date].map(timeslot => {
            return (
              <li>
                {<span className="event-time">{timeslot.hour}:00</span>}
              </li>
            );
          })}
        </ul>
      </li>
    </>
  );
  allDays.push(onThisDay);
}
return allDays;

render（）{
这是一个；
返回(



可利用性
{/*{this.renderTimeslots（）}*/}
{this.betterRenderTimeslots（）}
);
BetterRenderItemSlots=（）=>{
const newObject=this.restructureData（）；
让所有天=[]；
for（在newObject中输入日期）{
让我们在星期一=(
{date}


{newObject[date].map（时隙=>{
返回(

{{timeslot.hour}:00}

);
})}


);
全天推送（星期一）；
}
全天返回；

})

附带的CSS被粘贴到上面的代码笔中。它对我来说是什么样子的。

---

谢谢！

你的H3头球不在LI元素内，这就是它掉出来的原因

你的H3头球不在LI元素内，这就是它掉出来的原因

啊，我发誓我试过了！！这让它变得更好了。它仍然不太正确（现在看起来）但是我可以继续努力。谢谢！啊，我可以发誓我试过了！！这让它变得更好。它仍然不太正确（现在看起来），但我可以继续努力。谢谢！