Question

我有一个固定高度的div内的子弹列表。宽度是动态的，由div的内容决定，在这种情况下是一个项目符号列表。溢出设置为auto，因此当使用更长的列表时，它会向div添加一个滚动条。

问题在于，当它添加滚动条时，列表项不再相同，并且它会导致较长的一个（s）换行，它们通常会很难坐在右边缘。

#wrap {
  height: 150px;
  border: 1px solid #ff0000;
  overflow: auto;
  display: inline-block;
}

<div id="wrap">
<ul>
    <li>short list item 1</li>
    <li>short list item 2</li>
    <li>short list item 3</li>
    <li>this list item longer</li>
    <li>short list item</li>
    <li>short list item</li>
    <li>short list item</li>
</ul>
</div>

如果你将div的高度更改为250px，列表很好，每行一个，没有包装，但是将高度设置为150px，由于添加了滚动条，长行现在会换行。

有没有办法考虑滚动条的可能存在并添加填充/边距/什么来阻止任何不必要的包装发生？

请注意，white-space：nowrap不是一个选项，div应该只根据内容需要宽，但如果需要，仍允许包装非常长的行（如果某些行非常非常长）

Answer 1

我有一些可能性，但它们都有缺点，所以我想有些人会找到更好的答案：

您可以向该部门发送overflow-y:scroll;广告。滚动条将始终在这里，但只是变灰了
广告padding-right以补偿滚动条占用的空间
我认为这是最佳解决方案：下载perfect-scrollbar。这是一个jQuery插件，不会影响原始设计布局。如果您可以使用JavaScript和jQuery，那就是我拥有的最佳解决方案

带溢出的固定高度div导致内容的包装

1 个答案: