如何使背景色用奇数和偶数单元格的 hozintal 滚动填充我的所有内容?

Question

这个问题已经被问了很多次，但是至少我看到的5到10个问题似乎不适合我。

这是我的代码。如果你可以运行它并查看，水平滚动的颜色不会完全扩展。

我已经尝试了各种答案中提到的各种事情，但似乎没有一件对我有用。

我的要求：

我有一个具有替代颜色的数据列表 - 灰色和白色。我需要所有灰色单元格扩展到白色和灰色单元格的最大大小。如果有人能指出我在这里缺少什么，那就太好了。

.teammates{
position: absolute;
/*left: 2.83%;
top: 42%;*/
height: 160px;
width: 560px;
background: #FFFFFF;
border: 1px solid rgba(189, 189, 189, 0.79);
box-sizing: border-box;
border-radius: 2px;
}
ul.text-list{
white-space:nowrap;
position: absolute;
list-style:none;
max-height:160px;
max-width: 100%;
margin:0;
overflow:auto;
padding:0;
text-indent:15px;
}
li.text{
line-height:30px;
font-family: Inter-Regular;
font-style: normal;
font-weight: normal;
font-size: 14px;
color: #000000;
}
li.text:nth-child(odd){
/*display:inline;*/
background: rgba(222, 222, 222, 0.61);
}

<div class="teammates">
<ul class="text-list">
<li class="text">this is a text this is a text this is a text this is a text this is a text this is a text this is a text this is a text</li>
<li class="text">this is a text </li>
<li class="text">this is a text </li>
<li class="text">this is a text </li>
<li class="text">this is a text </li>
<li class="text">this is a text </li>
<li class="text">this is a text </li>
<li class="text">this is a text this is a text this is a text this is a text this is a text this is a text this is a text this is a text  this is a text this is a text</li>
</ul>
</div>

尝试过的事情：

1. https://stackoverflow.com/a/20776650/5841297
2. https://stackoverflow.com/a/20776585/5841297
3. 另外，尝试了display:table-row从答案中找到了我

Answer 1

1. 从类中删除max-width和overflow属性text-list。
2. 将overflow: auto添加到teammates类。

.teammates{
position: absolute;
height: 160px;
width: 560px;
background: #FFFFFF;
border: 1px solid rgba(189, 189, 189, 0.79);
box-sizing: border-box;
border-radius: 2px;
overflow: auto;
}
ul.text-list{
white-space:nowrap;
position: absolute;
list-style:none;
max-height:160px;
/*max-width: 100%;*/
margin:0;
/*overflow:auto;*/
padding:0;
text-indent:15px;
}
li.text{
line-height:30px;
font-family: Inter-Regular;
font-style: normal;
font-weight: normal;
font-size: 14px;
color: #000000;
}
li.text:nth-child(odd){
/*display:inline;*/
background: rgba(222, 222, 222, 0.61);
}

<div class="teammates">
<ul class="text-list">
<li class="text">this is a text this is a text this is a text this is a text this is a text this is a text this is a text this is a text</li>
<li class="text">this is a text </li>
<li class="text">this is a text </li>
<li class="text">this is a text </li>
<li class="text">this is a text </li>
<li class="text">this is a text </li>
<li class="text">this is a text </li>
<li class="text">this is a text this is a text this is a text this is a text this is a text this is a text this is a text this is a text  this is a text this is a text</li>
</ul>
</div>