ul li时间表元素重叠(ul li timetable elements overlapping)

制作响应时间表，切换到移动设备的列表格式，工作日作为标题，下面列出相关会话。 我遇到了li元素重叠的问题。 尽管尝试了位置和显示值，但我无法弄清楚如何抵消这种重叠。 任何帮助，将不胜感激。

.smallTableContainer {
  position: relative;
  display: none;
  height: auto;
  overflow: hidden;
}

.weekdayHeader {
  background: #bc4b51;
  color: #efefef;
  font-size: 18pt;
  padding: 10px 0px;
}

.sessions {
  padding: 0;
}

.className {
  float: left;
  display: inline-block;
  color: #1e1e1e;
  font-size: 13pt;
  padding-left: 10px;
}

.classTime {
  float: right;
  display: inline-block;
  color: #1e1e1e;
  font-size: 12pt;
  padding-right: 10px;
} 
  
<div class="smallTableContainer">
  <h3 class="weekdayHeader">Monday</h3>
  <ul class="sessions">
    <li>
      <div class="className">
        Warrior Cubs Kickboxing
        <br>AGES 5-7
        <br>[ SPACES AVAILABLE ] </div>
      <div class="classTime">
        <br> 16.15pm - 17.00pm
      </div>
    </li>

    <li>
      <div class="className">
        Warrior Cubs Kickboxing
        <br>AGES 8-12
        <br>[ SPACES AVAILABLE ]
      </div>
      <div class="classTime">
        <br> 17.00pm - 17.45pm
      </div>
    </li>

  </ul>

</div> 
  
 
Making a responsive timetable which switches to a list format for mobile, with Weekdays acting as headers and relevant sessions being listed below. I've encountered a problem where li elements overlap. Despite experimenting with position and display values, I can't figure out how to counteract this overlap. Any help would be appreciated.
 
 
 
  
  
.smallTableContainer {
  position: relative;
  display: none;
  height: auto;
  overflow: hidden;
}

.weekdayHeader {
  background: #bc4b51;
  color: #efefef;
  font-size: 18pt;
  padding: 10px 0px;
}

.sessions {
  padding: 0;
}

.className {
  float: left;
  display: inline-block;
  color: #1e1e1e;
  font-size: 13pt;
  padding-left: 10px;
}

.classTime {
  float: right;
  display: inline-block;
  color: #1e1e1e;
  font-size: 12pt;
  padding-right: 10px;
} 
  
<div class="smallTableContainer">
  <h3 class="weekdayHeader">Monday</h3>
  <ul class="sessions">
    <li>
      <div class="className">
        Warrior Cubs Kickboxing
        <br>AGES 5-7
        <br>[ SPACES AVAILABLE ] </div>
      <div class="classTime">
        <br> 16.15pm - 17.00pm
      </div>
    </li>

    <li>
      <div class="className">
        Warrior Cubs Kickboxing
        <br>AGES 8-12
        <br>[ SPACES AVAILABLE ]
      </div>
      <div class="classTime">
        <br> 17.00pm - 17.45pm
      </div>
    </li>

  </ul>

</div> 
  
 

                
最满意答案
                
                    
                        
 如果我正确理解了您想要的结果，您希望事件和时间在各行上消失。 为了做到这一点，你所寻找的只是cleart: both你的.sessions li 。 除此之外，您可能希望在每个事件之间添加一些间距，这可以通过将margin-top添加到（相当复杂的） .sessions li:not(:first-of-type) .className选择。 这确保了保证金将应用于除第一个之外的所有列表。 
 
 这可以在以下内容中看到： 
 
 
 
  
  
.smallTableContainer {
  position: relative;
  /*display: none;*/
  height: auto;
  overflow: hidden;
}

.weekdayHeader {
  background: #bc4b51;
  color: #efefef;
  font-size: 18pt;
  padding: 10px 0px;
}

.sessions {
  padding: 0;
}

.sessions li {
  clear: both;
}

.className {
  float: left;
  display: inline-block;
  color: #1e1e1e;
  font-size: 13pt;
  padding-left: 10px;
}

.classTime {
  float: right;
  display: inline-block;
  color: #1e1e1e;
  font-size: 12pt;
  padding-right: 10px;
}

.sessions li:not(:first-of-type) .className {
  margin-top: 20px;
} 
  
<div class="smallTableContainer">
  <h3 class="weekdayHeader">Monday</h3>
  <ul class="sessions">
    <li>
      <div class="className">
        Warrior Cubs Kickboxing
        <br>AGES 5-7
        <br>[ SPACES AVAILABLE ] </div>
      <div class="classTime">
        <br> 16.15pm - 17.00pm
      </div>
    </li>
    <li>
      <div class="className">
        Warrior Cubs Kickboxing
        <br>AGES 8-12
        <br>[ SPACES AVAILABLE ]
      </div>
      <div class="classTime">
        <br> 17.00pm - 17.45pm
      </div>
    </li>
  </ul>
</div> 
  
 
If I understand your desired result correctly, you want the events and times to disaply on individual lines. In order to do this, all you're looking for is cleart: both on your .sessions li. In addition to this, you'll probably want to add a bit of spacing between each event, which can be done by adding margin-top to the (rather complex) .sessions li:not(:first-of-type) .className selector. This ensures that the margin will be applied to all of the listings apart from the first one.
 
This can be seen in the following:
 
 
 
  
  
.smallTableContainer {
  position: relative;
  /*display: none;*/
  height: auto;
  overflow: hidden;
}

.weekdayHeader {
  background: #bc4b51;
  color: #efefef;
  font-size: 18pt;
  padding: 10px 0px;
}

.sessions {
  padding: 0;
}

.sessions li {
  clear: both;
}

.className {
  float: left;
  display: inline-block;
  color: #1e1e1e;
  font-size: 13pt;
  padding-left: 10px;
}

.classTime {
  float: right;
  display: inline-block;
  color: #1e1e1e;
  font-size: 12pt;
  padding-right: 10px;
}

.sessions li:not(:first-of-type) .className {
  margin-top: 20px;
} 
  
<div class="smallTableContainer">
  <h3 class="weekdayHeader">Monday</h3>
  <ul class="sessions">
    <li>
      <div class="className">
        Warrior Cubs Kickboxing
        <br>AGES 5-7
        <br>[ SPACES AVAILABLE ] </div>
      <div class="classTime">
        <br> 16.15pm - 17.00pm
      </div>
    </li>
    <li>
      <div class="className">
        Warrior Cubs Kickboxing
        <br>AGES 8-12
        <br>[ SPACES AVAILABLE ]
      </div>
      <div class="classTime">
        <br> 17.00pm - 17.45pm
      </div>
    </li>
  </ul>
</div>