如何在包装的浮动左列表中只有内边距

Question

我想知道如何使用 float:left; 获得 <li> 元素的包装列表。没有任何外边距，只有元素之间的边距。 Here 是我不想要的一个示例，因为它在列表外部有边距，而我希望外部列表的边框接触到内部列表项的边框。 Here 是我想要的一个例子，但是我发现这个解决方案很hacky，因为它需要在<ul> 之外使用第二个容器作为列表边框，如果你在@987654325 上粘贴边框@ 本身你会看到它仍然距离列表项 10px，我也更喜欢避免负边距，除非我真的需要使用它们。

float 似乎被设计为将图片等元素拉到一边并允许文本在它们的任一侧流动，而不是作为制作水平环绕列表的一种方式，因为不考虑浮动子元素的自然行为在确定高度时。正因为如此，我还想知道使用 flexbox 之类的东西是否会更好。

Answer 1

你是对的，这是对浮动的基本滥用。 Flexbox 是解决这个问题的一种方法，是的。