2016-02-11 59 views
1

fiddle here我不想重複我在2列未排序列表

我怎麼能有li標籤被均勻地隔開,以便它可以處理的名字

例如<li>1dddddddddddddddddddddd</li>重疊在<li>6</li>多變lenght,我希望他們能夠間隔

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

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**。儘管您已經提供了一個示例鏈接,但如果鏈接無效,那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。 –

+0

你期待**這個看起來的圖像也是有用的。 –

+0

請參閱我的編輯2 – HattrickNZ

回答

1

您可以使用柔性

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