造型无序列表

Question

我想让无序列表显示如下：

如何实现这种对齐？谢谢你的帮助！

Answer 1

对于此类功能，您可以使用列数属性。写得像这样：

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

有关详情，请查看此I want to show list items as 2 or more columns (dynamic alignment)

注意：它在IE中不起作用。

对于IE，您可以使用此JavaScript：CSS3 - Multi Column Layout Demonstration

Answer 2

我希望这对您有用： - http://tinkerbin.com/BAzYZaPY

您可以通过column-width属性

获得所需结果

只有Opera支持column-width属性。

Firefox支持另一种选择，-moz-column-width property。

Safari和Chrome支持另一种选择，-webkit-column-width property。

Answer 3

或者你可以尝试

<ul>
<li>cont</li>
<li>cont</li>
<li>cont</li>
</ul>
<ul>
<li>cont</li>
<li>cont</li>
<li>cont</li>
</ul>
<ul>
<li>cont</li>
<li>cont</li>
<li>cont</li>
</ul>

ul
{
  float:left;
}

Answer 4

您可以尝试这种风格（下方）。列数将根据元素数量和可用宽度动态变化。

<style>
   ul > li
   {
      list-style-type: none;
      display: block;
      float: left;
      width: 120px;
   }
</style>
<ul>
    <li>Barn</li>
    <li>Data</li>
    <li>Design</li>
    <li>Lov og rett</li>
    <li>Matt</li>
    <li>Musikk</li>
    <li>Barn</li>
    <li>Data</li>
    <li>Design</li>
    <li>Lov og rett</li>
    <li>Matt</li>
    <li>Musikk</li>
    <li>Barn</li>
    <li>Data</li>
    <li>Design</li>
    <li>Lov og rett</li>
    <li>Matt</li>
    <li>Musikk</li>
</ul>

如果你想在ul元素上设置固定数量的列宽度（列数乘以列表元素的宽度，例如在这种情况下你想要5列设置宽度为600px）：

ul {
    width: 600px;
}