Question

我在ul中有div，其中应用了水平滚动。 div为180px，ul中的项目大于此值。

我遇到的问题是ul和li没有延伸到它们的自然宽度，而是它们具有元素的宽度滚动已应用。这意味着如果您将背景颜色应用于列表项，则它不会覆盖整个元素。

有谁知道如何解决这个问题？

＆＃13;

div.wrapper {
      float: left;
    display: block;
    width: 180px;
}

div {
  overflow-x: auto;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: block;
  background: red;
  white-space: nowrap;
}

＆＃13;

<div class="wrapper">
  <div>
    <ul>
    <li><h3>sdf df sdijr wafl;k qwroksal wasdlk was</h3></li>
    <li><h3>sdf df sdijr wafl;k wasdlk was</h3></li>
    <li><h3>sdf df sdijr wafl;k qwroksal wasdlk was</h3></li>
    <li><h3>sdf df sdijdsf r wafl;k qwroksal wasdlk was</h3></li>
    <li><h3>sdf df sdijr d  df dfswe ef ewf wafl;k qwroksal wdsfdsfasdlk was</h3></li>
    <li><h3>sdf df sdijr wafl;k wasdlk was</h3></li>
    </ul>
  </div>
  </div>

＆＃13;

Answer 1

这可能对您有帮助，问题在于.wrapper的子div，请设置float:left。

＆＃13;

div.wrapper {
  float: left;
  display: block;
  width: 180px;
}
div {
  overflow-x: auto;
  float: left;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: block;
  background: red;
  white-space: nowrap;
}

＆＃13;

<div class="wrapper">
  <div>
    <ul>
      <li>
        <h3>sdf df sdijr wafl;k qwroksal wasdlk was</h3>
      </li>
      <li>
        <h3>sdf df sdijr wafl;k wasdlk was</h3>
      </li>
      <li>
        <h3>sdf df sdijr wafl;k qwroksal wasdlk was</h3>
      </li>
      <li>
        <h3>sdf df sdijdsf r wafl;k qwroksal wasdlk was</h3>
      </li>
      <li>
        <h3>sdf df sdijr d  df dfswe ef ewf wafl;k qwroksal wdsfdsfasdlk was</h3>
      </li>
      <li>
        <h3>sdf df sdijr wafl;k wasdlk was</h3>
      </li>
    </ul>
  </div>
</div>

＆＃13;

Answer 2

您可以将固有宽度值width: min-content;应用于li，例如in this fiddle

但是，您需要根据具体要求检查跨浏览器支持。

另一种方式（example fiddle）可能会在display: inline-block;元素上使用li吗？由于他们将采用line-height，我已经添加了一些余地来重新分隔它们。

Answer 3

只需将display: inline-block;添加到div旁边的.wrapper即可解决问题。

如何使用水平滚动在div中制作UL具有全宽

3 个答案: