我不想在我的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 我希望实现的观点

1dddddddddddddddddddddd     6
2                           7
3                           8
4                           9
5                           10

Answer 1

您可以使用flex

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;