列表 - 垂直显示子列表项

Question

我很抱歉这个问题措辞不好，我正在努力找到正确的方式来提问。

我在此codepen中有一个列表https://codepen.io/meek/pen/BmYZQB

<ul class="cageList">
  <li class="listHeader">
    <span class="header">Title</span>
    <span class="itemNo">Sub&nbsp;<span>2</span></span>
  </li>
  <li class="">
    <span class="name">Item 1</span>
  </li>
  <li>
    <span class="name">Item 2 type small</span>
  </li>
  <li>
    <span class="name">Item 2 type big</span>
  </li>
  <li>
    <span class="name">Item 3</span>
  </li>
</ul>

完成了一些造型。项目2类型小和大应该在“项目2”子列表中，其样式如下：

但我正在努力想出一个很好的方法来垂直列出第2项，就像在图片中一样，没有把所有东西都扔掉。我试图制作一个简单的flexbox div，右边的列/左边的行，但这似乎弄乱了交替的颜色：nth-​​child（偶数）。有没有人有任何好的建议？

Answer 1

Flex可以帮助您完成此操作，无需任何列表。

    .row {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 50%;
    }

    .col {
      flex: 1;
      padding: 1em;
      border: 1px solid #000;
    }

   .white-bg { background-color: #fff; }
   .grey-bg { background-color: #ccc; }
   .dark-grey-bg { background-color: #aaa; }

    .col-2 {
      flex: 100%;
      border: 1px solid #000;
    }

    .container {
      width: 300px;
    }

    .rotate {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

  <div class="container">
<div class="row">
  <div class="col">Title</div>
</div>
<div class="row">
  <div class="col grey-bg">Item 1</div>
</div>
<div class="row">
  <div class="col dark-grey-bg">
    <div class="rotate">Item 2</div>
  </div>
  <div class="col-2">
    <div class="row">
      <div class="col-2">
        Small
      </div>
    </div>
    <div class="row">
      <div class="col-2 grey-bg">
        Big
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col">Item 3</div>
</div>
  </div>