在三列中显示多个嵌套的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，Berry项目位于第一列，Pears位于第二列，Melons位于第三列，如下所示。此外，如果有新的添加，例如，如果我在列表中添加蓝色浆果，显示应保持原样如下，而不移动到第二列。

期望的输出：

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>