css - 带有溢出的固定高度 div 会导致内容换行

Question

我在一个固定高度的 div 中有一个元素符号列表。宽度是动态的，由 div 的内容决定，在本例中是元素符号列表。溢出设置为自动，因此当使用更长的列表时，它会向 div 添加一个滚动条。

问题是，当它添加滚动条时，列表项不再适合相同，并且会导致较长的项换行，而它们通常会紧贴右边距。

示例 fiddle 在这里:http://jsfiddle.net/6uguL/

#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，那是我拥有的最佳解决方案