列不适用于 ul

Question

我正在尝试使用有序列表创建 2 列 (ul)。由于某种原因，它不起作用。我成功创建了 ul 和 li's，但由于某些原因，这些列不起作用。这是 JSFiddle。这是代码：

ul {
 background-color:yellow;
 -webkit-columns:2; /* Chrome, Safari, Opera */
    -moz-columns:2; /* Firefox */
    columns:2;
}

li {
 display:inline-block;
}

<body>
<ul>
    <li>
     first
    </li>
    <li>
     second
    </li>
    <li>
     last
    </li>
</ul>

Answer 1

移除

li {
    display:inline-block;
}

display:inline-block; 强制它在一行上显示所有 li。

ul {
 background-color:yellow;
 -webkit-columns:3;
        -moz-columns:3;
        columns:3;
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

Answer 2

这样试试：Updated Demo

   ul {
    background-color:yellow;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    column-rule: none;
  }

然后删除 column-gap 以获得预期的输出:)

列不适用于 ul

Columns not working with ul

html

css

html-lists