如何使用嵌套列表創建水平日曆？

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），它們都是相同的寬度。然後在一個大的水平分區（.outer），所以我可以滾動內臟。 我已經有了這個工作只有一個月，但是當我增加更多的月份，它不再工作。

我顯然不能設置固定的月份，因爲他們沒有相同的天數。

我設置了a Fiddle here與一些CSS，但它不工作，我不知道如何去做。

Answer 1

這樣的問題都只是好玩回答一步一步的。

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兼容，並且沒有影響在標記上。

Answer 2

我已經完全重寫了你的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 3

看看這個了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; 
}