10

我已经阅读了很多关于使用 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！

4

2 回答 2

17

为此，您可以使用 CSSdisplay:table-cell属性。写这个：

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

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

检查这个JSFiddle。

于 2012-05-11T12:34:39.550 回答
6

这是一个使用 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>

于 2016-01-04T14:42:45.000 回答