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上的重置以删除默认的边距/填充。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: