css - 在动态列表中设置分隔线的可见性

Question

我正在尝试重新创建 www.kotaku.co.uk 的首页。如果您查看页脚，特别是“热门标签”列表。据我所知，这是一个非常标准的列表，但每行右侧的元素没有分界线。如果调整窗口大小，您可以看到行尾的每个元素都没有分界线。

有人能告诉我他们是如何做到这一点的吗？我曾尝试使用 flexbox，它得到了一个非常漂亮的结果，但在某些情况下，每个列表项的大小有点太不一致了。几天来我一直在为这件事绞尽脑汁，快把我逼疯了。

谢谢本

Answer 1

嗯，我也在摸不着头脑，为什么会这样，但我能够将代码缩小到 display: inline 的组合在 li 上的和display: inline-block在 a 上在 li 里面的。不确定在行尾禁用元素边框的组合是什么，但确实如此。

*{margin:0;padding:0;}
li {
  display: inline;
  border-right: 1px solid black;
}
li a {
  display: inline-block;
}

<ul>
<li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li><li><a href="#">asdf</a></li>
</ul>