从顶部进入底部

内嵌HTML列表多列HTML列表中显示这样在浏览器从顶部进入底部

item1 item2 item3 item4 item5 ...

我们可以实现只用HTML和CSS这样的事情

item1 item6 item11 
item2 item7 ... 
item3 item8 
item4 item9 
item5 item10

来源

2014-06-10 strike_noir

是......现在你有什么试过？ - http://stackoverflow.com/help/how-to-ask –

我试过显示属性，浮动属性，但我不能产生我想要的行为。你能对此有所了解吗？ –

使用columns属性：

ul { 
    list-style: none; 
    columns:100px 3; 
    -webkit-columns:100px 3; /* Safari and Chrome */ 
    -moz-columns:100px 3; /* Firefox */ 
}

这是你的demo

如果你不关心秩序，更兼容的方式来做到这一点是使用百分比为li宽度：

li { 
    display: inline-block; 
    min-width: 25%; 
    margin-right: 5%; 
}

演示此代码here

来源

2014-06-10 15:08:00 jackcogdill

那些不支持CSS3的浏览器呢？ –

我没有意识到列属性可用于列表。我认为这只适用于div或段落等区块元素。谢谢。 –

@faridv编辑了答案。 – jackcogdill

尝试相同的这个样子，与UL的第一UL内列>里的行

<ul> 

    <li> 
    <ul> 
     <li>first item first column</li> 
     <li>second item first column</li> 
    </ul> 
    </li> 

    <li> 
    <ul> 
     <li>first item second column</li> 
     <li>second item second column</li> 
    </ul> 
    </li> 

</ul>

您将需要一些CSS技巧

ul ul > li{float:left;}

来源

2014-06-10 15:16:51 Miktown

我想他希望为给定的HTML提供CSS解决方案，而不是通过更改HTML来解决问题。 –

从顶部进入底部

回答

相关问题