Question

我已经阅读了很多关于使用css均匀分布元素的内容，但我发现的每个解决方案都要求您知道并定义要分发的元素的宽度和/或数量。

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

这是我的标记 - 除了可以有任意数量的标签，其中包含任何长度文本。

<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进行均匀分布 - 可以这样做吗？

似乎想做这样一个显而易见的事情 - 该死的CSS！

Answer 1

为此你可以css display:table-cell财产。写得像这样：

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

选中此http://jsfiddle.net/px7Uf/

Answer 2

这是一个解决方案，当内容溢出分配的单元格宽度时，使用flexbox保持均匀宽度：

ul.tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.tabs>li.tab {
  flex: 1;
  text-align: center;
  /* just adding visibility to the tabs */
  border: 1px solid rgba(0,0,0,.12); 
  padding: 10px;
}

<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. This is a very long tab and should overflow...</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>

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

2 个答案: