我怎样才能让我的背景颜色填充我的所有内容，水平滚动奇数和偶数单元格？

Question

这个问题已经被问过很多次了，但至少我看到的 5 到 10 个问题似乎对我不起作用。

这是我的代码。如果你能运行看看，水平卷轴的颜色并没有完全展开。

我尝试了各种答案中提到的各种方法，但是 none 似乎对我有用。

我的要求：

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

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

尝试过的事情：

此外，尝试 display:table-row 从答案中找到我

Answer 1

从 text-list class.

max-width

overflow

将 overflow: auto 添加到 teammates class。

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

我怎样才能让我的背景颜色填充我的所有内容，水平滚动奇数和偶数单元格？

How can I make my background-color fill all my content with hozintal scrolling for both odd and even cells?

html

css

horizontal-scrolling