将长整型列表< li>标签到列？ [英] Dividing long list of <li> tags into columns?

问题描述

我在< ul> 中列出了大约30个< li> 有什么办法，使用CSS，把它们分成三列十？

解决方案

http://www.quirksmode.org/css/multicolumn.html =nofollow noreferrer>可能。

  #columns {
 -moz-column-count：3; 
 -moz-column-gap：20px; 
 -webkit-column-count：3; 
 -webkit-column-gap：20px; 
 column-count：3; 
 column-gap：20px; 
} 
  

HTML：

 < div id =columns> 
< ul> 
 ... lot of lis ... 
< / ul> 
< / div> 
  

列表项将溢出到下一列，因为它们超出了容器的高度。 p>

也许对于较旧的浏览器，你可以使用JavaScript，因为这似乎比一个关键的功能更美观。

I've got a list of about 30 <li> in a <ul>. Is there any way, using CSS, to divide these into three columns of ten?

解决方案

In CSS3 this is possible.

#columns {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

HTML:

<div id="columns">
  <ul>
... lots of lis ...
  </ul>
</div>

The list items will spill over into the next column as they exceed the height of the container.

Perhaps for older browser you could use JavaScript, as this seems to be more aesthetic than a critical feature.

这篇关于将长整型列表< li>标签到列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！