display：table-cell所有单元格的相同空间

Question

我遇到display: table-cell;问题以及单元格之间的空格。我想为所有细胞动态提供相同的宽度。

请参阅JSFiddle

如何看待"Ausstattung & Skizze"比其他人宽得多。有没有办法动态地为所有单元格设置相同的宽度？

Answer 1

li {
  display: inline-block;
  width: 150px;
}

编辑：不需要inline-block，width:25%

Answer 2

您可以在包含table-layout:fixed;

的父元素上使用display:table;

ul{
  display: table;
  width: 700px;
  table-layout: fixed;
}

这样，无论你连续多少个细胞，如果你不强迫它们的宽度，每个细胞都会得到相同的宽度。

（编辑：请参阅此JSfiddle http://jsfiddle.net/m8evqnv0/）

Answer 3

如果无序列表的宽度是固定的，则： -

li
{
    width: 25%;
}

最佳实践： - 使用li课程，然后为课程设置样式。

如果您希望表格具有响应性，那么请使用表格标记。它会像魅力一样发挥作用。

小提琴： - http://jsfiddle.net/4wsmx8t0/3/