css - 如何创建带有嵌套列表的水平日历？

Question

我想创建一个这样的日期选择器:

| 1 2 3 4 5 6 7 8 9 .. 29 30 31 | 1 2 3 4 ..
| January                       | February

我认为最好的结构是:

 <div class="outer">
   <ol>
     <li class="month">
     January
       <ol>
         <li class="day">1</li>
         <li class="day">2</li>
         <li class="day">3</li>
         ...
        </ol>
      </li>
      <li class="month">
        February
        <ol>
          <li class="day">1</li>
          <li class="day">2</li>
          <li class="day">3</li>
          ...
        </ol>
      </li>
    </ol>
 </div>

现在我希望外部 div (.month) 扩展到内部 div (.day)，它们的宽度都相同。然后将它放在一个大的水平 div (.outer) 中，这样我就可以滚动内部结构。我已经让这个只用了一个月就可以工作了，但是当我再增加几个月的时候，它就不再工作了。

我显然无法为月份设置固定值，因为它们的天数不同。

我设置了a Fiddle here 有一些 css，但它不起作用，我不知道该怎么做。

Answer 1

我已经完全重写了你的 CSS，因为很难确定你想要什么样的外观。我选择使用最新的 CSS3 flexbox specification — 仅仅因为它允许我在不使用 position 的情况下相对于日期重新定位月份，这将非常困惑。您可能希望使用供应商前缀来确保对 CSS3 flexbox 的最大跨浏览器支持。

请参阅概念验证 fiddle :http://jsfiddle.net/teddyrised/g6u52vhn/4/ .我对您的标记所做的唯一更改是将月份包装在 <span> 中标签 ;)

我冒昧地添加了边框，以便您可以清楚地区分不同的元素。

.dates {
    display: block;
    position: absolute;
    left: 5%;
    width: 90%;
    height: 200px;
    overflow: auto;
}

/* General list styles */
.dates ol {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    white-space: nowrap;
}
.dates li {
    display: flex;
    flex-flow: row wrap;
    flex-shrink: 0;
    flex-grow: 1;
}

/* Specific styles */
.dates > ol > li {
    border: 1px solid #000;
}
.dates .month span {
    border: 1px solid #999;
    display: block;
    order: 2;
    width: 100%;
}
.dates .month ol {
    order: 1;
}
.dates .month ol li {
    border: 1px solid #999;
}

但是，如果您需要支持旧版浏览器，您可能希望回退到旧版 <table>元素，我认为这将是充分和有效的。