有什么方法可以使用纯 CSS 来按比例分配利润吗？

Question

如果不使用像 Sass 或 Less 这样的预处理器，有什么方法可以使一系列元素的边距与其内容成正比？

设想一个包含 5 个项目的水平导航栏。每一项的文字都不一样，有的长有的短，像这样：

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

我想 space 按比例显示这些内容，以便总宽度为父容器的 100%，并且每个项目的 space 和边距与其包含的文本量成比例，没有任何他们的保证金太多或太少。您可以看到该行末尾的空白 space —— 例如，它不应该存在。太多 space 分配给最终元素。

纯 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/

有什么方法可以使用纯 CSS 来按比例分配利润吗？

Is there any way to make proportionate margins using pure CSS?

css

margin