将可变长度列表分成两部分 - 一个水平部分，另一个垂直部分仅使用 CSS

Question

我有一个平面列表，我需要静态定位一些列表项，而其他列表项绝对定位（这样下面的内容不受影响）。但是，绝对列表项不需要彼此重叠，而是将它们自己堆叠在一起。

我能够复制我希望用 nth-child 选择器（见下文）做的事情，但这会在它所占的 li 的数量上创建一个 "cap"。单击 "Toggle More" 查看绝对定位的子项。

正在寻找产生相同视觉效果但在 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>

将可变长度列表分成两部分 - 一个水平部分，另一个垂直部分仅使用 CSS

Break a variable-length list in two parts - one horizontally, and another vertical using only CSS

css

css-position

absolute

css-selectors