为什么列表项不填充滚动无序列表的宽度？

Question

围绕这个问题有很多问题，但似乎没有一个可以为我找到解决方案。

我有一个设置宽度的无序列表，overflow-x 以便它可以水平滚动，并且它的列表项具有不换行的空白。这个想法是所有列表项都占一行，如果需要，用户可以水平滚动。

这在大多数情况下都有效，但我发现如果项目具有背景颜色或其他样式，很明显项目本身不会填充 ul 内容区域的宽度，包括其可滚动部分。

这是演示：

ul {
  border: 1px solid;
  list-style: none;
  overflow-x: auto;
  padding: 2em;
  width: 300px;
}

li {
  border: 1px solid red;
  white-space: nowrap;
}

<ul>
  <li>
      This is very long.
      This is very long.
      This is very long.
      This is very long.
  </li>
    <li>
      This is short.
  </li>
</ul>

我希望所有列表项都填充列表的可滚动宽度。所以在我的演示中，这两个项目的红色边框会一直延伸到最后。

Answer 1

使用您的宽度和溢出属性创建一个 div 溢出包装器。然后将ul 设置为display: inline-block，你应该得到你想要的。

div {
  overflow-x: auto;
  width: 300px;
  padding: 2em;
  border: 1px solid;
}
ul {     
  list-style: none;
  padding: 0;
  display: inline-block;
}

li {
  border: 1px solid red;
  white-space: nowrap;
}

<div>
<ul>
  <li>
      This is very long.
      This is very long.
      This is very long.
      This is very long.
  </li>
    <li>
      This is short.
  </li>
</ul>
</div>

更新

在不添加任何额外标记的情况下，您可以尝试将li 设置为display: inline-block; 或者min-width: 100%; 以匹配容器的宽度（至少）。

ul {     
  list-style: none;
  overflow-x: auto;
  width: 300px;
  padding: 2em;
  border: 1px solid;
}

li {
  border: 1px solid red;
  white-space: nowrap;
  display: inline-block;
  min-width: 100%;
}

<ul>
  <li>
      This is very long.
      This is very long.
      This is very long.
      This is very long.
  </li>
    <li>
      This is short.
  </li>
</ul>