删除两列之间不需要的列间隙

Question

我创建了一个列数为2的菜单。但是，元素之间存在不需要的列间隙，这使我无法给它们一个合适的边距。由于某种原因，如果列的内容大于另一列，则列间隙会动态地改变间隙。例如：

我有两个菜单。下划线代表差距

-Item test 1____-Item test 2
-Item test 3____-Item test 4
-Item test 5____-Item test 6

当项目名称较短时，差距也会缩短：

-Item 1__-Item 2
-Item 3__-Item 4
-Item 5__-Item 6

我的示例有截图。这些是列表项，它们没有填充和边距。内部的span标签也是如此。

-

更短的商品，完全相同的造型（上面的截图）。请原谅这里的身份，StackOverflow搞砸了，我猜？

样式：

ul.parent {
    column-count: 2;
    column-gap: 0;
}

ul.parent li {
    margin: 0;
    padding: 0;
    font-family: FontG;
}

HTML代码看起来像这样。它是通过PHP呈现的，但实际输出将是这样的：

<ul class="parent">
    <li>
        <span>Item 1</span>
    </li>
     <li>
        <span>Item 2</span>
    </li>
    <li>
        <span>Long Item 3</span>
    </li>
    <li>
        <span>Long Item 4</span>
    </li>       
</ul>

可能导致这个奇怪问题的原因是什么？

Answer 1

较窄的宽度很可能是由于较窄的ul而导致的。如果要保持较大的宽度，请在l上设置宽度，例如：

ul { width: 100%; }

Answer 2

您也可以使用表格，它会动态安排。

＆＃13;

＆＃13;

<table>
  <tr>
    <td>Item 1</td>
    <td>Long Item 3</td>
  </tr>
  <tr>
    <td>Item2abcdefghi</td>
    <td>Long Item4</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;