在每一列中设置不同的颜色 css？

Question

我在列数 css 属性中遇到一个问题。我这里有一个这样的列表--

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
  <li>thirteen</li>
  <li>fourteen</li>
  <li>fifteen</li>
  <li>sixteen</li>
</Ul>

我必须像图片那样做--

我可以通过关注 css

添加 4 列

.list {
   column-count: 4
}

但是我怎样才能一个接一个地给这个red和white颜色。这个我看不懂。

注意：我必须创建 ul, li。我无法改变这个。

Answer 1

最好使用不同的布局方法而不是 column-count: 4，因为您不能在此处使用 odd even 功能并且必须定义 color 值使用 nth:child

创建的单个列

.list {
  column-count: 4;
}

.list :nth-child(n+5) {
  background: #FF0705;
}

.list :nth-child(n+9) {
  background: blue;
}

.list :nth-child(n+13) {
  background: green;
}

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
  <li>thirteen</li>
  <li>fourteen</li>
  <li>fifteen</li>
  <li>sixteen</li>
</ul>

4 列的简单方法，但您也可以查看 display: flex 属性。

#list {
  display: flex;
}

div span {
  display: block;
}

div:nth-child(even) {
  background: #FF0705;
}

<div id="list">
  <div>
    <span>one</span>
    <span>two</span>
    <span>three</span>
    <span>four</span>
  </div>
  <div>
    <span>five</span>
    <span>six</span>
    <span>seven</span>
    <span>eight</span>
  </div>
  <div>
    <span>nine</span>
    <span>ten</span>
    <span>eleven</span>
    <span>twelve</span>
  </div>
  <div>
    <span>thirteen</span>
    <span>fourteen</span>
    <span>fifteen</span>
    <span>sixteen</span>
  </div>
</div>

Answer 2

因为您不知道各种 li 元素的内容可能是什么 - 它们可能占据非常不同的高度 - 您无法提前知道哪个 li 元素将在哪一列中。

因此，除非在最简单的情况下（每个 li 占用相同 space），否则使用 nth-child 是不安全的。

另一种方法是在 ul 元素上设置背景图像，其中 'stripes' 红色和白色分别占宽度的 25%。着色因此具有响应性。

.list {
  column-count: 4;
  background-image: linear-gradient(to right, white 0 25%, red 25% 50%, white 50% 75%, red 75% 100%);
}

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
  <li>thirteen</li>
  <li>fourteen</li>
  <li>fifteen</li>
  <li>sixteen</li>
</Ul>

在每一列中设置不同的颜色 css？

Set different color in every column css?

html

javascript

css

styles