Question

说我有<ul>以下css：

position:relative;
border: solid;
border-radius:2px;
height:350px;
overflow:auto;
padding-left: 2px;
display:inline-block;
list-style-type:none;

当我将<li>元素添加到<ul>作为其子元素时，div会水平扩展以适应子节点的宽度。

但是，滚动条会占用div中的空间。

如果添加了足够多的子项以要求滚动条，则最宽的文本节点将包含最后一个单词。

我发现修复此行为的唯一方法是将<ul> s white-space属性设置为nowrap，但这只会使文本流过边界，而不是扩展边界本身并创建一个丑陋的水平滚动条。

演示

＆＃13;

ul {
  position: relative;
  border: solid;
  border-radius: 2px;
  height: 150px;
  overflow: auto;
  padding-left: 2px;
  display: inline-block;
  list-style-type: none;
  /*Uncomment below to see the effect of adding nowrap*/
  /*white-space: nowrap;*/
}

＆＃13;

<ul>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>LONG STUFF-STUFF</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
</ul>

＆＃13;

相同代码段的jsFiddle，以防您更喜欢使用它：https://jsfiddle.net/Lg0s231g/1/

Answer 1

您的<ul>元素已经缩小以适应，因为它已设置为inline-block。您只需为滚动条添加额外的空间。

添加：

overflow-x: clip;
padding-right: 20px;
white-space: nowrap;

这是JSFiddle

使用滚动条正确扩展元素以适合子内容宽度

演示

1 个答案: