CODEWITHSUNDEEP
htmlcss
MegaMatt
MegaMatt

Reputation: 23763

Why are list items not filling the width of scrolled unordered list?

There have been a number of questions that dance around this, but not one that seems to nail the solution for me.

I have an unordered list with a set width, overflow-x so it can scroll horizontally, and its list items have white-space of no-wrap. The idea is that all list-items take up a single line, and the user can scroll horizontally if needed.

This all works, for the most part, but I'm finding that if items have a background-color, or some other styling, it becomes evident that the item itself doesn't fill the width of the ul's content area, to include its scrollable section.

Here's the demo:

ul {
  border: 1px solid;
  list-style: none;
  overflow-x: auto;
  padding: 2em;
  width: 300px;
}

li {
  border: 1px solid red;
  white-space: nowrap;
}
<ul>
  <li>
      This is very long.
      This is very long.
      This is very long.
      This is very long.
  </li>
    <li>
      This is short.
  </li>
</ul>

I'd like all list items to fill the scrollable width of the list. So in my demo, the red border for both items would extend all the way to the end.

Upvotes: 0

Views: 94

Answers (1)

zgood
zgood

Reputation: 12571

Create a div overflow wrapper with your width and overflow properties. Then set the ul to display: inline-block and you should get what you are after.

div {
  overflow-x: auto;
  width: 300px;
  padding: 2em;
  border: 1px solid;
}
ul {     
  list-style: none;
  padding: 0;
  display: inline-block;
}

li {
  border: 1px solid red;
  white-space: nowrap;
}
<div>
<ul>
  <li>
      This is very long.
      This is very long.
      This is very long.
      This is very long.
  </li>
    <li>
      This is short.
  </li>
</ul>
</div>

UPDATE

Without adding any additional markup you could try setting the li's to display: inline-block; and maybe a min-width: 100%; to match the container's width (at least).

ul {     
  list-style: none;
  overflow-x: auto;
  width: 300px;
  padding: 2em;
  border: 1px solid;
}

li {
  border: 1px solid red;
  white-space: nowrap;
  display: inline-block;
  min-width: 100%;
}
<ul>
  <li>
      This is very long.
      This is very long.
      This is very long.
      This is very long.
  </li>
    <li>
      This is short.
  </li>
</ul>

Upvotes: 2

Related Questions