css - 有什么方法可以使用纯 CSS 来制作按比例的边距吗？

Question

如果不使用像 Sass 或 Less 这样的预处理器，有没有办法让一系列元素的边距与其内容成比例？

想象一下有 5 个元素的水平导航栏。每一项的文字都不一样，有的长有的短，像这样:

Menu |  Technology and Society | Laurem Ipsum | More Filler Text | Contact

我想按比例将它们隔开，以便总宽度为父容器的 100%，并且每个元素的空间和边距与其包含的文本量成比例，而没有任何一个有太多或太少的边距。您可以看到该行末尾的空格——例如，不应该出现的空格。分配给最终元素的空间太多。

这可以用纯 CSS 实现吗？

如果不行，用Sass或Less怎么办？

注意:我正在尝试查看如何动态完成此操作，而不是通过硬性指定宽度百分比。我的意思是有没有一种方法可以使用 CSS，无论我如何更改文本，它都会自动执行。

Answer 1

唯一的方法是使用 display: table/table-cell 值。

<ul>
    <li>Menu
    <li>Technology and Society
    <li>Laurem Ipsum
    <li>More Filler Text
    <li>Contact
</ul>

<style>
    ul {margin: 0; padding: 0; display: table; width: 100%;}
    li {display: table-cell; text-align: center;}
</style>

http://jsfiddle.net/og8m3g2m/