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

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;
}