Question

我正在尝试使用有序列表（ul）创建2列。由于某种原因，它不起作用。我成功创建了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的列

2 个答案: