Question

我正在创建一个水平标签菜单。

由于选项卡是响应式的，我需要应用一些规则：

标签的最大宽度为264px

标签宽度是文本的宽度+ 24px左右;

然而（这里是棘手的一点），所有标签必须大小相同;

如果选项卡区域的总宽度小于可用宽度（页面容器），则所有选项卡都等于最大宽度并以空间为中心。

如果总宽度等于或超过可用宽度（例如移动），则选项卡将设置为固定宽度（例如3个制表符= 33.33％），文本将在必要时换行。

我正在考虑解决这个问题的最佳方案。

我猜测基于表格的解决方案是可行的，但是从未在愤怒中使用过表格，我不完全确定。（如果有人对此有任何建议，我们将不胜感激）
一个javascript解决方案？
Flexbox并不是一个真正可行的解决方案，因为它的支持不够广泛。
是否还有其他css方法可以让所有标签宽度相等？

所有帮助建议表示赞赏。

Answer 1

你同意这里重要的是贪婪，所以有一个简单的解决方案，导航和标签浮动。

＆＃13;

case class Conference (
    id         : Long,
    ...
    var forGroup   : Option[LabGroup]=None
)

＆＃13;

ul{
  list-style: none;
}
li{
  width: 100%;
}

@media only screen and (min-width: 768px) {
  li{
    float: left;
    //other styles for tabs
  }
}

＆＃13;

内联列表 - 有哪些方法可以使项目等于最大宽度？

1 个答案: