当宽度和数量未知时，如何使用 CSS 均匀分布菜单项?

问题描述

我已经阅读了很多关于使用 css 均匀分布元素的文章，但我找到的每个解决方案都要求您了解并定义要分布的元素的宽度和/或数量.

I've read a lot on evenly distributing elements using css but every solution i've found requires you to know and define the width and/or the number of elements being distributed.

我有一个固定宽度的容器 - 这里可以包含任意数量的自动宽度的 li 元素，这些元素需要从左到右均匀分布在父元素上.

I have a container that is of a fixed width - within here could be any number of li elements of an automatic width which need to be distributed evenly across the parent element from left to right.

这是我的标记 - 除了可以有任意数量的标签和任意长度的文本.

Here is my markup - except there could be any number of tabs with any length text in them.

<ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>

所以当元素数量和宽度是动态的时，使用 css 均匀分布 - 可以做到吗?

So Even Distribution with css when the number of elements and width is dynamic - can it be done?

似乎很明显想要做的事情 - 该死的 CSS！

Seems like such an obvious thing to want to do - Damn CSS!

推荐答案

为此，您可以使用 CSS display:table-cell 属性.写这个:

For this, you can use the CSS display:table-cell property. Write this:

.tabs {
  display: table;
  width: 300px;
  border: 1px solid green;
}

.tabs li {
  display: table-cell;
  border: 1px solid red;
  height: 40px;
}

检查这个 JSFiddle.

这篇关于当宽度和数量未知时，如何使用 CSS 均匀分布菜单项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！