ul时刻表元素重叠

Question

制定相应的时间表，转换为移动列表格式，平日作为标题和相关的会议列在下面。我遇到了一个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>

​

Answer 1

如果我正确地理解了您想要的结果，您希望事件和时间在单独的行上显示出来。为了做到这一点，您所要寻找的就是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>

​