有没有办法使用纯CSS制作比例边距？-IsthereanywaytomakeproportionatemarginsusingpureCSS?

Without using a preprocessor like Sass or Less, is there any way to make the margins of a series of elements proportional to their content?

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

So picture a horizontal navbar with 5 items. The text of each item is different, some are long and some are short, like this:

所以想象一个有5个项目的水平导航栏。每个项目的文本都不同,有些是长的,有些是短的,如下所示:

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

I want to space these out proportionately so that the total width is 100% of the parent container and each item gets space and margin proportionate to the amount of text it contains without any of them having too much or too little margin. You can see how there's blank space at the end of the line-- that, for example, should not be there. Too much space is apportioned to the final element.

我想按比例分配这些,使总宽度为父容器的100%,每个项目的空间和边距与其包含的文本量成比例,而没有任何边距太多或太少。您可以看到行尾的空白区域 - 例如,不应该在那里。太多空间被分配给最终元素。

Is this possible with pure CSS?

纯CSS可以实现吗?

If not, how can it be done with Sass or Less?

如果没有,如何使用Sass或Less?

Note: I'm trying to see how this can be done dynamically, not by hard-specifying the width percents. I mean is there a way to use CSS so that it just does it automatically no matter how I change the text.

注意:我试图看看如何动态完成,而不是通过硬指定宽度百分比。我的意思是有一种方法可以使用CSS,这样无论我如何更改文本,它都会自动执行。

2 个解决方案

    
Menu
    
Technology and Society
    
Laurem Ipsum
    
More Filler Text
    
Contact