horizontal scroll list width adjust to new items

Question

I have an horizontal scroll list of items. But I can't manage to have the ul list automatically adjust to the number of items included. That is, I want the width of the ul to grow as the I update the list with new items.

I have:

products ul { position: relative; width: auto; overflow-x: scroll; white-space: nowrap; margin: 0; padding: 0; }

but it only works if I define a width like width: 10000px...

please help! How can I do this?

thanks

Answer 1

Give the ul display: inline-block and the width will adjust to the content. You may have some spaces between the elements, this spaces can be reduced to 0 if you set font-size: 0 and set the real font-size to the elements inside (the li elements). This happens because display inline-block have some space between elements set in em so they take the font-size, so you set font-size 0 and there will be no extra spaces

UPDATE: I guess what you are trying to achieve is this: http://jsfiddle.net/carloscalla/xarjkqbo/2/

Look at the

display: inline-block;

This sets the width to the content and li elements have this, then ul as well as it grows depending on its children.

Try taking out some li elements and give it just two of them, you wont have scroll since ul's width depends on its content. Look that there is not width set, it all depends on content.

Red border tells you the ul's width, look that this changes depending on content.

Answer 2

It doesn't seem to be working.

my css: .category { comment: I've cleaned it up so it has nothing at the moment } .products ul { display:inline-block; width: auto; overflow-x: scroll; white-space: nowrap; margin: 0; padding: 0; } .product { width:1200px; margin-right:100px; }

my html

<div class="category">
<ul class="products">
<li class="product">product 1</li>
<li class="product">product 2</li>
etc
</ul>
</div>

Does width: auto work? or do I need to specify it? Anything I may be missing or anything before that may be overwriting it? I have the category div within other another div for example...