Question

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

<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>

     :
    / \
  'h'  ++
      /  \
    "e"  "llo"

    (,)
   /  \
  +    +
 / \  / \
1  1  2  2

\x ->
  |
  +
 / \
2   2

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>

ul时间表元素重叠

1 个答案: