css - 相应地调整大型菜单 li，使 li 的减少相等

Question

一段时间以来，我一直在为这个问题挠头。我需要使 ul li 菜单相应地减小宽度。目前，随着屏幕宽度的减小，最后一个 li 换行到另一行。虽然我已经设法在我的一个菜单上做到这一点，但由于 li 内容的大小不相等，因此相同类型的 css 将无法用于此。我确实从以前的 SO 问题中找到了一个 fiddle ，但是尝试这种方法它完全破坏了“按产品购买”的下拉菜单的样式

随着视口(viewport)的缩小，我正试图实现类似的效果。 http://jsfiddle.net/au9muz43/css 非常简单，如

.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
}
.horizontal-style a {
display: block;
border: 1px solid red;
text-align: center;
margin: 0 5px;
background: #999
}

我在这里设置了一个包含大量 css 和 html 的 fiddle :https://jsfiddle.net/1Le63xk0/1/

连加

display:table-cell;

到我的CSS行

.mega-menu li{float:left;text-align:center;position:relative;margin-right:15px;border:none;}

打破产品的下拉布局

Answer 1

所以快速组合两个 fiddle ，我注意到有些风格是冲突的。我删除了你对 li/a 的 display:block 调用，并使它们成为 display:table-cell; (这就是为什么它会收缩，而不是下降到一条新线。

把你所有的 css 都带过来，这只是修复某些仍然样式为 block /内联 block 并将它们转换为表格格式的 div 的情况。

在这些行中发现了主要问题:

.mega-menu li a{color:#fff;outline:0;padding:12px 35px 0px 0px;text-decoration:none;display:block;font-weight:normal;text-transform:uppercase;}

.mega-menu li:hover a{color:#007dc5;position:relative;z-index:11;padding:4px 11px 3px 11px;}

你有大量填充来插入每个 div。

这是 JSFiddle .

编辑:更新只是为了带来更多他的 CSS。

编辑 2: 仍然被否决，除了仔细检查 OP 的 display 属性之外，没有其他方法可以解释它。 OP 没有回应解释 fiddle 有问题，据我所知，它满足了他的所有要求:缩小的导航栏，他的下拉菜单工作相同。