li table-cell display不工作

Question

我有一个使用<ul>元素构建的水平菜单。我试图让它在菜单的宽度上均匀地展开每个<li>。基于SO的几个答案，我使用了以下CSS：

ul {
  display: table;
  width: 100%;
}

ul li {
  display: table-cell;
}

然而，无论我尝试什么，<li>元素仍然以block的计算显示结束，来自调试器的这些矛盾信息（在FF和Chrome中测试）：

我不知道这里发生了什么，（更重要的是）如何让我的列表项显示为table-cell？

Answer 1

在照片中显示你的style.css非常大（最小1835行），因为ul的样式可能会在某处被覆盖。 要使您的规则比现有规则更重要，请在规则之后使用！important关键字，如下所示：

ul {
  display: table!important;
  width: 100%!important;
}

ul li {
  display: table-cell!important;
}

Answer 2

CSS有一个称为重要性的特征，它选择哪个规则最具体，因此应该覆盖更松散的规则。由于您似乎使用CSS框架，因此您自己的规则不会覆盖框架的通用规则。事实证明，您有两种方法可以在main.css增加规则的重要性：

1. 在您的规则后添加!important：

    ul li {
      display: table cell !important;
    }
   

2. 让您的选择器更加具体：

   #menu ul li.menu-list-item { ... }
   

你的问题看起来也很奇怪，你可能会遇到浏览器渲染错误，你有没有尝试过其他浏览器？