我如何追加子元素父的一面，當超過

高度這是我的代碼：我如何追加子元素父的一面，當超過

<ul style="height:200px;width:100%;"> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
</ul>

這是它的外觀：

這就是我想要的樣子：

來源

2017-02-15 131

使用column-count:2;

ul { 
 
    -webkit-column-count: 2; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; 
 
    /* Firefox */ 
 
    column-count: 2; 
 
}

<ul style="height:200px;width:100%;"> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
</ul>

來源

2017-02-15 07:17:43

由於它的工作原理兄弟 – 131

歡迎... @ 131 –

試試這個。使用列數：2;和高度屬性UL

ul { 
 
    -moz-column-count:2; 
 
    -webkit-column-count:2; 
 
    column-count:2; 
 
    max-height: 300px; 
 
} 
 

 
ul > li { 
 
    height: 20px; 
 
}

<ul> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
</ul>

來源

2017-02-15 07:30:35 Dhaarani

我如何追加子元素父的一面，當超過

回答

相關問題