html - 设置无序列表的样式

Question

我试图让一个无序列表看起来像这样：

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

Answer 1

对于这种类型的功能，您可以使用column-count属性。像这样写：

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

有关更多检查，我想将列表项显示为 2 列或更多列（动态对齐）

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

对于 IE，你可以使用这个 JavaScript：CSS3 - Multi Column Layout Demonstration

Answer 2

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

<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;
}

Answer 3

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

你可以通过column-width属性获得想要的结果

该column-width属性仅在 Opera 中受支持。

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

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

Answer 4

或者你可以试试

<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;
}