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。

参见概念证明小提琴：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>元素，我觉得这个元素已足够且有效。

Answer 2

查看JSFiddle链接。你的CSS部分没有太大的变化，但是你的HTML部分略有变化，我给了dates > OL类，因为dates > OL > LI > OL默认从父OL获取CSS。另外，我将包含月份名称的LI文本放在span。

中

HTML部分：已更新

....<div class="dates">
    <ol class="datesOL">
        <li class="month">....

CSS部分：已更新

.dates {
    height: 60px;
}

.datesOL {
    margin: 0;
    padding: 0px;
    overflow: scroll;
}

.dates ol li {
    overflow: auto;
}

.dates ol li ol {
    display: block;
    padding: 0;
    height: 12px; // removed
    top: -80px; // removed
}

.dates ol li ol li {
    display: inline-block;
    width: 20px;
}

Answer 3

这些问题一步一步回答很有趣。

The basics of the solution is to display all list items as inline-block:

.calendar > ol > li {
    display: inline-block;
}
.calendar > ol > li > ol {
    padding: 0;
}
.calendar > ol > li > ol > li {
    display: inline-block;
}

Give the dates a fixed size, put all months on a single line, and let the container scroll:

.calendar {
    overflow-x: auto;
}
.calendar > ol {
    padding: 0;
    margin: 0;
    white-space: nowrap;
}
.calendar > ol > li {
    display: inline-block;
}
.calendar > ol > li > ol {
    padding: 0;
}
.calendar > ol > li > ol > li {
    display: inline-block;
    width: 30px;
}

And finally, shuffle the months' and the dates' positions，导致这个snippit：

.calendar {
    overflow-x: auto;
    overflow-y: hidden;
}
.calendar > ol {
    padding: 0;
    margin: 0;
    white-space: nowrap;
    margin-bottom: -1em;
}
.calendar > ol > li {
    display: inline-block;
    margin-top: 1em;
}
.calendar > ol > li > ol {
    padding: 0;
}
.calendar > ol > li > ol > li {
    display: inline-block;
    width: 30px;
    position: relative;
    top: -2.2em;
}

<div class="calendar">
    <ol>
        <li>January
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ol>
        </li>
        <li>February
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ol>
        </li>
        <li>March
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </li>
        <li>April
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ol>
        </li>
    </ol>
</div>

请注意，这是一个严格的CSS2解决方案，即使是最老的浏览器兼容，也不使用绝对定位，因此它对周围的内容没有任何影响，只需要一个样式类，与every font size兼容，并且对标记没有任何影响。

如何使用嵌套列表创建水平日历？

3 个答案: