Chris Chris - 2 months ago 18
CSS Question

How to make UL in div with horizontal scroll have full width

I have a

ul
in a
div
which has a horizontal scroll applied. The div is 180px and the items in the
ul
are bigger than this.

This problem I've got is that the
ul
and
li
's don't extend to their natural width, instead they have the width of the element with the scroll applied. This means that if you apply a background colour to the list items it doesn't cover the whole element.

To demonstrate this I've made a jsFiddle. Does anyone know how to solve this?

Answer

This may help you, the issues is with child div of .wrapper, set float:left to it.

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>