Imagine you have a container that is 780px wide, with 6 items inside ranging from 10px to 130px in width.
Your goal is to fill the entire 780px space with these items and evenly space them out using margin.
You may have tried using a table layout, but encountered issues with maintaining the original width of the list items.
Here's an example in HTML:
<ul class="foo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
And here's the corresponding CSS:
.foo{
display:table;
table-layout:fixed;
}
.foo li{
padding:5px;
display:table-cell;
}