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>元素，我认为这是足够和有效的。