全宽左对齐列表

Question

Is it possible to stretch and unordered list to fill the full page-width; floating list-items (left) inside of it, without list-items getting clipped if they overflow (hidden) the unordered list?

If I simply do overflow: none; on the unordered list, whatever list-items are inside, which wont fit a 100 percent, are not shown.

This is what I want...

http://roosteronacid.com/stackoverflow.png

Notice that the first and third list-items are shown, even if the unordered list isn't able to show/house them in their full width.

Answer 1

You should set ul to display: table, and li to table-cell. Here is example: http://jsfiddle.net/simoncereska/4w92q/