html - 如何使带有水平滚动的div中的UL具有全宽

Question

我在 div 中有一个 ul，它应用了水平滚动。 div 是 180px，ul 中的元素比这个大。

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

有人知道怎么解决吗？

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

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

Answer 1

这可能对您有帮助，问题出在 .wrapper 的子 div 上，将 float:left 设置为它。

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

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