Горизонтальная прокрутка переполняет HTML <li>, не зная ширину

Question

http://jsfiddle.net/waitinforatrain/DSSPb/2/

Я хочу расположить группу <li> элементов, представляющих изображения, в горизонтальном прокручиваемом контейнере, как в примере выше.

Уловки, которые я видел до сих пор, устанавливают ширину контейнера равной ширине <li> элементов. Однако я не знаю, какой будет ширина контейнера, потому что содержимое динамическое.

Есть ли способ сделать это с помощью CSS, не зная ширины контейнера?

Answer 1

Что-то вроде этого, возможно? http://jsfiddle.net/mattball/5JRdZ/

• изменить ul и li display на inline-block
• удалить li { float: left; }
• добавьте ul { white-space: nowrap; }, чтобы <li> s не переносились на следующую строку, когда <ul> слишком узкий

Теперь ваша задача - решить li { height: 100%; margin: 4px }, в результате чего <li> s будет выше, чем <ul>. (Вот решение: http://jsfiddle.net/mattball/avTgR/:)