如何在 CSS 列计数后正确对齐

Question

我正在处理无序列表。我试图在多列中显示内容。我设法用 CSS 的列数做到了这一点，但是内容显示不正确。好像列表的第一项放在了第二个位置，导致列表歪了。

而不是这个输出：

A  F  K
B  G  L
C  H  M
D  I  N
E  J  O

我得到：

   E  J  O    
A  F  K  
B  G  L 
C  H  M
D  I  N

或者，当我有两个项目要放在两列中时，我想要：

A  B

但我得到：

   A  B

所以似乎第一个位置总是被跳过。我一直在寻找解决这个问题的方法，但找不到其他人遇到这个问题，大多数人还有其他对齐问题。这是包含 ul:

的 div 的 CSS

div.partlist { 
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
}

大家有什么想法吗？

Answer 1

我怀疑您缺少对 ul/li 的重置以删除默认值 margin/padding。

div.partlist {
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  column-count: 3;
  column-gap: 10px;
  margin-top: 10px;
  border: 1px solid grey;
  display: inline-block;
  margin: 25px;
}
ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

<div class="partlist">
  <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>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
  </ul>
</div>

如何在 CSS 列计数后正确对齐

How to proper align after CSS column-count

html

css

multiple-columns