排列元素，无论其大小如何

Question

我创建一个类别A-Z的列表。为此，我使用ul和li元素。我希望这些元素一个接一个地排列，而不管元素的高度如何。我当前的代码正确放置了元素，但是如果块中有很多元素，则会出现错误并且难题会消失

我的实际代码：

ul > li{
  display:inline-block;
  padding:10px;
  background:#eee;
  width:calc(100% / 4);
  box-sizing:border-box;
}

ul > li > ul{
  display:block;
}

ul > li > ul > li{
  display:block;
}

<ul>
    <li>
      <h2>A</h2>
      <ul>
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
      </ul>
    </li>
    <li>
      <h2>B</h2>
      <ul>
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
      </ul>
    </li>
    <li>
      <h2>C</h2>
      <ul>
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
      </ul>
    </li>
    <li>
      <h2>D</h2>
      <ul>
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
          <li>Text 6</li>
          <li>Text 7</li>
          <li>Text 8</li>
          <li>Text 9</li>
          <li>Text 10</li>
      </ul>
    </li>
    <li>
      <h2>E</h2>
      <ul>
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
      </ul>
    </li>
</ul>

我该如何解决？

Answer 1

只需将li之后的立即ul内容与vertical-align: top对齐；

ul > li{
  display:inline-block;
  padding:10px;
  background:#eee;
  width:calc(100% / 4);
  box-sizing:border-box;
  vertical-align: top;
}

ul > li > ul{
  display:block;
}

ul > li > ul > li{
  display:block;
}

<ul>
    <li>
      <h2>A</h2>
      <ul>
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
      </ul>
    </li>
    <li>
      <h2>B</h2>
      <ul>
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
      </ul>
    </li>
    <li>
      <h2>C</h2>
      <ul>
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
      </ul>
    </li>
    <li>
      <h2>D</h2>
      <ul>
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
          <li>Text 6</li>
          <li>Text 7</li>
          <li>Text 8</li>
          <li>Text 9</li>
          <li>Text 10</li>
      </ul>
    </li>
    <li>
      <h2>E</h2>
      <ul>
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
      </ul>
    </li>
</ul>