Question

如果列数为偶数，则此列表显示第1行和第2行的背景颜色不同。当我将列数更改为5时，线颜色不再适用，它会显示每个字段的颜色而不是每行，因为行数也是5.如何保持自定义行数？或任何其他方式将背景颜色应用于5列的奇数和偶数行？

<ul id="list">
            <li>Peter</li>
            <li>Mary</li>
            <li>qaul</li>
            <li>Allen</li>
            <li>James</li>
            <li>Vicki</li>
            <li>Brock</li>
            <li>Dana</li>
            <li>Frank</li>
            <li>Gil</li>
            <li>Helen</li>
            <li>Peter</li>
            <li>sadf</li>
            <li>Paul</li>
            <li>cad</li>
            <li>Hyad</li>
            <li>k;pg</li>
            <li>werd</li>
            <li>radn</li>
            <li>vrank</li>
            <li>Gil</li>
            <li>zelen</li>
</ul>

#list {
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
 }


#list li {
  border-left:1px solid #dedede;
  border-top:1px solid #dedede;

}

#list li:nth-of-type(even) {
    background: #fff;

}
#list li:nth-of-type(odd) {
   background: #efefef;
}

http://jsfiddle.net/De8Ku/3625/

Answer 1

也许你不应该使用CSS3列数属性。因为在这种情况下，行数相对于li的数量。现在，你有22个li标记，当你将它添加到25时，即使你没有将列数从6改为5，背景也会出错。

您可以将HTML从ul更改为表格，很容易控制行的背景。

谢谢！

Answer 2

如果列表顺序无关紧要，请浮动<li>，添加百分比宽度并使用:nth() CSS选择器。

如何将奇数和偶数颜色应用于5列列表

2 个答案: