在三列中显示多个嵌套 li [英] Display multiple nested li in three columns

问题描述

我的列表结构如下.

<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>

我希望输出在苹果的三行中，浆果项目在第一列，梨子在第二列，瓜子在第三列，如下所示.另外，如果有新添加的内容(例如，如果我将蓝莓添加到列表中)，则显示应保持如下所示，而无需移至第二列.

I want the output to be in three rows with Apple,Berry items on first column, Pears on second, Melons on third column like below. Also if there is new addition for example if i add blue berry to the list, display should remain intact as below without moving to second column.

所需的输出:

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

我在CSS之下尝试过，但它会将berry结果的一部分移至下一列.

I tried below css but it shifts part of berry results to next column.

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

推荐答案

我稍微修改了HTML，但这似乎可行.

I changed up the HTML a bit but this seems to work.

.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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！