Question

所以，让我们说我有一个宽780像素的div，里面有6个列表项。

这些列表项的范围可以从10px到130px宽。

我希望列表项用尽整个780px并将其与边距均匀分开（当然是自动）。

我已尝试过桌子，但它没有保留列表项目的原始宽度。

HTML

<ul class="foo">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>

CSS

.foo{
  display:table;
  table-layout:fixed;
}
.foo li{
  padding:5px;
  display:table-cell;
}

Answer 1

您正在寻找的是为无序列表设置display: flex;。

ul.foo { 
    display: flex;
}

ul.foo li { 
    display: inline-block;
    flex: 1;
    text-align: center;
}

<ul class="foo">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>

Answer 2

总是有旧学校的方法，概述如下。但是flex支持正在增加（http://caniuse.com/#search=flex）！所以，如果你能走那条路，那就是我选择的路线。

ul.foo {
  width: 780px;
  margin: 0;
  padding: 0;
  list-style: none outside;
}

ul.foo li {
  width: 16.66%;
  float: left;
  outline: 1px solid green;
}

<ul class="foo">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>

自动展开和展开李项目

2 个答案: