將可變長度列表分爲兩部分 - 一個水平，另一個垂直使用只有CSS

Question

我有一個扁平列表，其中我需要靜態放置某些列表項目以及其他列表項目（以便內容底下不受影響）。然而，絕對清單項目不需要彼此重疊，而是將自己排列在另一個之上。

我能夠複製我希望用nth-child選擇器（請參閱下文）做的事情，但是它會爲它所解釋的li數量創建一個「上限」。點擊「切換更多」查看絕對定位的孩子。

尋找一種解決方案產生相同的視覺效果，但靈活的關於li的數量。無法更改HTML。希望只有CSS的解決方案 - 不需要JS。

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700); 
 
body { 
 
    font-family: 'Lato', sans-serif; 
 
    background: #333; 
 
    color: #ddd; 
 
    font-weight: 300; 
 
    margin: 0; 
 
} 
 

 
.wrap { 
 
    position: relative; 
 
    background: #000; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
label { 
 
    float: right; 
 
    padding: 5px 10px; 
 
    font-weight: bold; 
 
    color: #afa; 
 
} 
 

 
li { 
 
    display: none; 
 
    padding: 5px 10px; 
 
    border-left: 1px solid #fff; 
 
    line-height: 30px; 
 
    white-space: nowrap; 
 
} 
 
li:first-child { 
 
    border-left: 0; 
 
} 
 
li:nth-child(-n+3) { 
 
    display: inline-block; 
 
} 
 

 
#show:checked ~ ul li:nth-child(n+4) { 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: 0; 
 
    border-left: 0; 
 
    min-width: 50%; 
 
    background: #555; 
 
    top: 100%; 
 
} 
 
#show:checked ~ ul li:nth-child(5) { 
 
    top: calc(100% + 30px); 
 
} 
 
#show:checked ~ ul li:nth-child(6) { 
 
    top: calc(100% + 60px); 
 
} 
 
#show:checked ~ ul li:nth-child(7) { 
 
    top: calc(100% + 90px); 
 
} 
 
#show:checked ~ ul li:nth-child(8) { 
 
    top: calc(100% + 120px); 
 
} 
 
#show:checked ~ ul li:nth-child(9) { 
 
    top: calc(100% + 150px); 
 
} 
 
#show:checked ~ ul li:nth-child(10) { 
 
    top: calc(100% + 180px); 
 
} 
 
#show:checked ~ ul li:nth-child(11) { 
 
    top: calc(100% + 210px); 
 
} 
 
#show:checked ~ ul li:nth-child(12) { 
 
    top: calc(100% + 240px); 
 
} 
 
#show:checked ~ ul li:nth-child(13) { 
 
    top: calc(100% + 270px); 
 
} 
 
#show:checked ~ ul li:nth-child(14) { 
 
    top: calc(100% + 300px); 
 
} 
 
#show:checked ~ ul li:nth-child(15) { 
 
    top: calc(100% + 330px); 
 
}

<!-- http://codepen.io/allicarn/pen/vLqPNG --> 
 

 
<div class="wrap"> 
 
    <input type="checkbox" id="show" /> 
 
    <label for="show">Toggle "More"</label> 
 
    <ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <!-- CSS only accounts for up to 15 --> 
 
    </ul> 
 
</div> 
 
<p>This is some content underneath the bar that should not be affected by the toggling open/close of the other children.</p>

Answer 1

在我看來，要更容易實現浮動元素到右，並對準通標籤的第一個元素上做一些技巧的效果，那就是已經浮動

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700); 
 
body { 
 
    font-family: 'Lato', sans-serif; 
 
    background: #333; 
 
    color: #ddd; 
 
    font-weight: 300; 
 
    margin: 0; 
 
} 
 

 
.wrap { 
 
    position: relative; 
 
    background: #000; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
label { 
 
    float: right; 
 
    padding: 5px 10px; 
 
    font-weight: bold; 
 
    color: #afa; 
 
} 
 

 
li { 
 
    display: none; 
 
    padding: 5px 10px; 
 
    border-left: 1px solid #fff; 
 
    line-height: 30px; 
 
    white-space: nowrap; 
 
} 
 
li:first-child { 
 
    border-left: 0; 
 
} 
 
li:nth-child(-n+3) { 
 
    display: inline-block; 
 
} 
 

 
#show:checked ~ ul li:nth-child(n+4) { 
 
    display: inline-block; 
 
    border-left: 0; 
 
    min-width: 50%; 
 
    background: #555; 
 
    float: right; 
 
    clear: right; 
 
    margin-left: -50%;  /* allow content to keep where it is */ 
 
}

<!-- http://codepen.io/allicarn/pen/vLqPNG --> 
 

 
<div class="wrap"> 
 
    <input type="checkbox" id="show" /> 
 
    <label for="show">Toggle "More"</label> 
 
    <ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <!-- CSS only accounts for up to 15 --> 
 
    </ul> 
 
</div> 
 
<div>Whatever content is under the bar - Whatever content is under the bar - Whatever content is under the bar</div>