css - 我不想在我的 2 列无序列表中重叠

Question

fiddle here

我怎样才能得到 li标签均匀分布，因此它可以处理不同长度的名称

例如<li>1dddddddddddddddddddddd</li>重叠在 <li>6</li> , 我希望它们间隔开

EDIT1 添加代码

<ul class='cols2'>
    <li>1dddddddddddddddddddddd</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul> 

EDIT2 我希望实现的 View

1dddddddddddddddddddddd     6
2                           7
3                           8
4                           9
5                           10

Answer 1

你可以使用 flex

.cols2{
  list-style: none;
  display: flex;
  flex-flow: column wrap;
  max-height: 100px;
}

<ul class='cols2'>
    <li>1dddddddddddddddddddddd</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>