在三列中显示多个嵌套的 li

Question

我有以下无序列表结构。

<ul>
  <li>
    <a>Apple</a>
    <ul>
      <li>
        <a>Gala Apple</a>
      </li>
    </ul>
  </li>
  <li>
    <a>Berry</a>
    <ul>
      <li><a>Strawberry</a></li>
      <li><a>Rasperry</a></li>
      <li><a>Cranberry</a></li>
      <li><a>Blueberry</a></li>
    </ul>
  </li>
  <li>
    <a>Pear</a>
    <ul>
      <li>
        <a>European Pear</a>
      </li>
      <li>
        <a>Asian Pear</a>
      </li>
    </ul>
  </li>
  <li>
    <a>Melons</a>
    <ul>
      <li>
        <a>Water Melon</a>
      </li>
      <li>
        <a>Winter Melon</a>
      </li>
    </ul>
  </li>
</ul>

我希望输出在三行中，第一列是苹果，浆果项目，第二列是梨，第三列是甜瓜，如下所示。此外，如果有新的添加，例如，如果我将蓝莓添加到列表中，显示应保持不变，如下所示，而不会移动到第二列。

期望的输出：

Apple           Pears              Melons
   Gala Apple     European Pear       Water Melon
Berry             Asian Pear          Winter Melon
   Strawberry
   Rasperry
   Cranberry 
   Blueberry

我在下面试过 css 但它会将部分浆果结果移到下一列。

-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;

Answer 1

Pradeep，怎么样？

.one {
  width: 30%;
  background-color: lightgray;
  height: 200px;
  display: inline-grid;
}
.two {
  width: 30%;
  background-color: lightblue;
  height: 200px;
  display: inline-grid;
}
.three {
  width: 30%;
  background-color: lightgreen;
  height: 200px;
  display: inline-grid;
}

<div class="one">
  <ul>
    <li> Apple </li>
    <ul>
      <li> Gala Apple </li>
    </ul>
  </ul>
  <ul>
    <li> Berry </li>
    <ul>
      <li> Strawberry </li>
      <li> Rasperry </li>
      <li> Cranberry </li>
      <li> Blueberry </li> 
    </ul>
  </ul>
</div>

<div class="two">
  <ul>
    <li> Pear </li>
    <ul>
      <li> European Pear </li>
      <li> Asian Pear </li>
    </ul>
  </ul>
</div>

<div class="three">
  <ul>
    <li> Melons </li>
    <ul>
      <li> Water Melon </li>
      <li> Winter Melon </li>
    </ul>
  </ul>
</div>

Answer 2

我稍微更改了 HTML 但这似乎有效。

.col{
  display:inline-block;
  vertical-align:top;
}

<ul class='col'>
  <ul>
    <li>Apple</li>
    <ul>
      <li>Gala Apple</li>
    </ul>
  </ul>

  <ul>
    <li>Berry</li>
    <ul>
      <li>Strawberry</li>
      <li>Rasperry</li>
      <li>Cranberry</li>
      <li>Blueberry</li>           
    </ul>
  </ul>
</ul>

<ul class='col'>
<li>Pear</li>
  <ul>
    <li>European Pear</li>
    <li>Asian Pear</li>           
  </ul>
</ul>

<ul class='col'>
  <li>Melons</li>
  <ul>
    <li>Water Melon</li>
    <li>Winter Melon</li>           
  </ul>
</ul>

在三列中显示多个嵌套的 li

Display multiple nested li in three columns

css

list

unordered