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/

Answer 2

以下链接可以帮助您。在本文中，将解释各种场景。 http://www.senktec.com/2014/01/using-css-display-table-cell-for-columns/

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

2 个答案: