Question

我正在创建列表中的日历。我在页面顶部有一个列表，该列表将在下一个/上个月显示，并显示您正在查看的当前月份。

<ul class="time-selection">
    <li class="calendar-nav">Prev</li>
    <li class="current-month">January 2015</li>
    <li class="calendar-nav">Next</li>
</ul>

使用css：

.time-selection {
  width: 33.3%;
  text-align: center;
  float: right;
  list-style: none;
}
.time-selection li {
  float: left;
  width: 33.3%;
  text-align: center;
  text-transform: uppercase;
  margin: 20px 0;
}

然后我有另一个列表，显示一周的日子。

<ul class="days-view">
    <li>
        <span>Sunday</span>
    </li>
    <li>
        <span>Monday</span>
    </li>
    ...
</ul>

再次css：

.days-view {
  height: 40px;
  text-align: center;
  list-style: none;
}
.days-view li {
  float: left;
  text-align: center;
  text-transform: uppercase;
  line-height: 20px;
  border: none!important;
  padding: 10px 6px;
  color: #666;
  font-size: 13px;
  height: 50px;
}

我的问题是我的日期列表没有附加在控制月份的列表下方。我试过clear，但这并没有帮助我。我需要做些什么才能使我的列表正确堆叠？

Answer 1

我创建了一个jsfiddle http://jsfiddle.net/3f968afh/1/

这就是你要找的东西吗？

我将你的css调整为：

  .time-selection {
      width: 33.3% ;
      text-align: center;
      float: left;
      list-style: none;
  }

  .time-selection li {
      float: left;
      width: 33.3% ;
      text-align: center;
      text-transform: uppercase;
      margin: 20px 0;
  }

  .days-view {
      height: 40px;
      text-align: center;
      list-style: none;
      clear: both;
  }

  .days-view li {
          float: left;
          text-align: center;
          text-transform: uppercase;
          line-height: 20px;
          border: none!important;
          padding: 10px 6px;
          color: #666;
    font-size: 1px;
    height: 5px;
  }

如何让我的列表叠加在一起？

1 个答案: