如何在不知道宽度和数量的情况下用CSS均匀分布菜单项? [英] How to evenly distribute menu items with CSS when width and quantity is not known?
问题描述
我已经阅读了很多关于使用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?
看起来像这样明显的事情 - Damn CSS!
Seems like such an obvious thing to want to do - Damn CSS!
推荐答案
为此,您可以使用css display:table-cell
属性。这样写:
For this your can css display:table-cell
property. Write like this:
.tabs{
display:table;
width:300px;
border:1px solid green;
}
.tabs li{
display:table-cell;
border:1px solid red;
height:40px;
}
这篇关于如何在不知道宽度和数量的情况下用CSS均匀分布菜单项?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!