4
Have a div that dynamically displays a series of items grouped into a horizontal list. The parent element of this list has a maximum width defined in my CSS. It is possible to make the specific width of this parent element (<ul>) is the "sum" of the width of the items in that list (<li>)?
In the example there is a basis of what I want to do: my tag <ul> has a maximum width of 560px. Still, in order not to leave all this white space, I wanted the width to be up to the limit of the last li.
ul {white-space:nowrap; overflow-x:auto; overflow-y:hidden; max-width:560px; height:24px; border:2px solid #000; padding:10px}
li {display:inline-block}<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
Dude I didn’t get it right, if you want it to have the exact width eh just don’t put width on ul, and there wouldn’t have felt the overflow since it already weaves the full width of the children... I found it kind of confusing to understand what you want to do...
– hugocsl
@hugocsl I understand, Hugo. You’re right. But I need to leave the max-width because in some resolutions I will need the overflow-x precisely because the amount of items in this list varies and will sometimes exceed the value set in max-width. Only sometimes not, so the doubt involving a possible min-width. Already, grateful for the understanding, man!
– winiercape