显示：所有单元格的表格单元格相同空间

我遇到了display: table-cell;和单元格之间的空间问题。我想动态地为所有单元格宽度相同。显示：所有单元格的表格单元格相同空间

怎么可以看到的"Ausstattung & Skizze"比别人更广泛。有没有办法为所有单元格动态设置相同的宽度？

2015-02-09 Pomm0

什么“相同的宽度”？你应该在问题本身中包含相关的HTML和CSS。 – 2015-02-09 09:15:29

可以持有display:table;

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

这样的父元素上使用table-layout:fixed;，每一个细胞都将获得相同的宽度，如果你不逼自己的宽度，没有你连续有多少个单元格。

（编辑：查看此JS fiddle http://jsfiddle.net/m8evqnv0/）

来源

2015-02-09 09:10:35 Aghaa

伟大的解决方案，谢谢！ – Pomm0 2015-02-09 09:15:46

它对你的回应@MarkusGruber？表格宽度是700px的静态。 – 2015-02-09 09:23:48

我增加了宽度：100％;比它的响应性足够 – Pomm0 2015-02-09 09:46:29

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

编辑：无需inline-block，与width:25%

来源

2015-02-09 08:53:06 yonatanmn

它必须有响应，所以静态宽度不是一个好主意。 – Pomm0 2015-02-09 08:54:28

和'宽度：25％' - 是不够的？ – yonatanmn 2015-02-09 08:56:13

是的，我认为是一样的，但问题是，它也必须是多种语言。例如在意大利语中，某些词比德语中的要宽很多。所以它不适合宽度：25％。我知道我可以用一点点宽度来适应所有语言。如果使用display：table; With display：table;我不会使用它。它会更清晰，更好，我想..谢谢。 – Pomm0 2015-02-09 09:01:35

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

li 
{ 
    width: 25%; 
}

最佳实践： - 使用类里，然后风格的类。

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

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

来源

2015-02-09 08:58:50

我正在编辑小提琴。更新： - 完成。 – 2015-02-09 09:05:39

当可用宽度足够窄时失败，当宽度非常大时会产生荒谬的结果。当然是 – 2015-02-09 09:16:33

。一个响应表应该被实现，并且应该设置一个最大宽度，因为一个只有％响应的4列表在移动时看起来不会很好。伟大的一点@ JukkaK.Korpela – 2015-02-09 09:20:36

显示：所有单元格的表格单元格相同空间

回答

相关问题