html - 如何使我的背景颜色填充我的所有内容，并为奇数和偶数单元格进行水平滚动？

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从答案中找到我

标签： htmlcsshorizontal-scrolling

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>