Question

大家好我要创建一个列表类型

就是这样的

               <ul>
                    <li>Delhi</li>
                    <li>Mumbai</li>
                    <li>banglore</li>
                    <li>Gurgaon</li>
                    <li>Nainital</li>
                    <li>Lucknow</li>
                    <li>noida</li>
                    <li>Jaipur</li>
                    <li>Chnadigarh</li>
                    <li>Manli</li>
                    <li>Haryana</li>
                    <li>Goa</li>
                </ul>

但我希望像这样格式化

  Delhi           Gurgaon        noida         Manli    
  Mumbai          Nainital       Jaipur        Haryana
  banglore        Lucknow        Chnadigarh    Goa

请帮我创建这个。感谢

Answer 1

使用CSS列：

ul {
    -webkit-column-count: 4;
}

请注意浏览器前缀。

Answer 2

使用以下CSS

   ul {
    -webkit-column-count: 4; /*2 is just a placeholder -- can be anything*/
    -moz-column-count: 4;
    column-count:4;
    width: 100%; /*your fixed width*/
    height: 100%; /*your fixed height*/
  }

DEMO

Answer 3

如果要使用HTML，可以使用此代码。在标签

中使用以下css

<style>
.table
{
width: 100%;
}
.tdclass
{
width: 80px;
}
</style>

并在标签

中添加HTMl

<table>
<tr>
<td class="tdclass">Delhi</td>
<td class="tdclass">Mumbai</td>
<td class="tdclass">Banglore</td>
<td class="tdclass">Gurgaon</td>
</tr>
<tr>
<td class="tdclass">Nainital</td>
<td class="tdclass">Lucknow</td>
<td class="tdclass">noida</td>
<td class="tdclass">Jaipur</td>
</tr>  
<tr>
<td class="tdclass">Chnadigarh</td>
<td class="tdclass">Manali</td>
<td class="tdclass">Haryana</td>
<td class="tdclass">Goa</td>
</tr> 
</table>

使用List标签，您可以使用

ul {
-webkit-column-count: 4;
-moz-column-count: 4;
}

如何将html列表分成4个部分？

3 个答案:

DEMO