Question

围绕着这个问题有很多问题，但似乎没有一个问题可以解决这个问题。

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

这一切在大多数情况下都有效，但我发现如果物品有背景颜色或其他造型，很明显物品本身并没有填满ul的内容区域，包括其可滚动部分。

这是演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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>

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

1 个答案: