自适应中列表项的边界如何折叠

Question

示例jsfiddle：https://jsfiddle.net/bf4kncdh/1/

.top-nav是具有我要边界折叠的元素列表的元素。 在桌面中，我有1行菜单项，但是在自适应菜单中，它们被排列成几行，并且行之间的边界变粗了，下一行的1个元素没有左边界。

我需要它们的侧面具有所有边界，例如它们的宽度相同，并且彼此相邻。

有没有办法像这样使边界保持不变，使html标记不变？

Answer 1

我找到了解决此问题的最佳方法。它基于outline和少量margin的属性来补偿邻居列表项上的双宽度边框。

https://jsfiddle.net/bf4kncdh/2/

这是解决方案。

.main-nav ul li {
  outline: 1px solid #fff;
  margin-top: 1px;
  margin-right: 1px;
}