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

Question

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

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

我需要它们的所有边框都在两侧，就像它们的宽度一样，彼此相邻。

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

标签： javascripthtmlcss

Answer 1

我找到了解决这个问题的最佳方法。它基于outline和 littlemargin的属性来补偿相邻列表项的双宽度边框。

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

这就是解决方案。

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