为什么不能覆盖这种通用的CSS样式？

Question

我正试图通过this方法平均分配5个不同宽度的物品。它在Chrome中运行良好，但FireFox和Safari将li元素分成几行。

li元素是本页顶部的元素，红色背景为白色文本： http://www.mountainwarehouse.com/?_vis_test_id=46&_vis_opt_random=0.35009177937172353&_vis_hash=c587be8bb0d54b248efca89ff9b8486a&_vis_opt_preview_combination=2

通用样式规则似乎与我的代码冲突，特别是设置框大小的行：

*, *::after, *::before {
  box-sizing: border-box;
}

所以我在box-sizing: content-box !important;的横幅上设置了一个明确的大小调整样式，但它似乎没有覆盖仅在FireFox和Safari中显示在顶部的通用样式：

Answer 1

在firefox上实现此目的的最佳方法是使用flexbox。

我会引用MDN docs，但编辑的代码可以满足您的问题。

从你提供的link这是HTML结构（我将在本例中使用它）：

<ul id="parent">
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
  <li>element 4</li>
</ul>​

CSS（不要忘记我之前提到的MDN文档）：

#parent {
  display: flex;
}
#parent li {
  justify-content: center;
  width: 100%
}

注意：您可以使用以下任何一种：flex-start | flex-end |中心|空间|空间的周围

注意：检查Can I Use - Flexbox以查看此解决方案是否适合您。例如它是IE 10 +